2. 程式人生 > >highCharts 轉svg 導出excel

highCharts 轉svg 導出excel

阿新 • • 發佈：2018-05-10
highCharts svg excel

具體的需求是這樣的：

前臺要將查出來的數據用highcharts 展示，包括數據封裝到table中，table 中展示hightchart的圖標，例如這樣

技術分享圖片

這個應該不難實現，那麽這個頁面下面有一個導出按鈕，要將這些數據（table +hightcharts 的圖標）到處成excel 到本地，問題是怎麽將hightcharts 顯示在excel中，理論上報圖標保存為圖片，在workbook中調用圖片也不難，但是現在需要點導出的時候就要生成excel ,這就有點復雜。

具體點的實現是這樣的：在前臺將highchart的數據生成svg ,在後臺將svg 在生成字節流，然後將字節流寫到workbook 中。

代碼如下

前臺的hightcharts 是這樣的：

 var dailyChartObjOption = {
                chart: {
                    renderTo: 'div_survey',
                    margin: [ 50, 10, 40,10],
                    polar: true,
	                type: 'line'
                },
                title: {
                    text: ("網發調研"),
                    floating: true,
                    style: { fontFamily: '上海大眾l,Microsoft YaHei, Verdana, Arial',minWidth:'1170px',fontSize:'16px'}

                },
                pane: {
                    size: '100%'
	            },
                xAxis: {
                    categories:['<%=EnumSurveyType.SQS.getName() %>','<%=EnumSurveyType.CSS.getName() %>','<%=EnumSurveyType.MS.getName() %>','<%=EnumSurveyType.OIC.getName() %>','<%=EnumSurveyType.DCDA.getName() %>'],
                    labels: { 
                        style: { 
                            fontFamily: 'xxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'
                        }
                    },
                    tickmarkPlacement: 'on',
	                lineWidth: 0
                },
                yAxis: {
	                min: 0,
                    max:100,
                    labels: { 
                        enabled:false,
                        style: { 
                            fontFamily: 'xxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'
                        }
                    }
                },
                tooltip: {
                    valueSuffix: '',
                    style: { fontFamily: 'xxxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'},
                    formatter: function() {
                    var y = this.y;
                        if (this.x == "<%=EnumSurveyType.SQS.getName() %>") {
                            y = Math.round(parseFloat(this.y) * 1000)/100;
                        }
                        else if(this.x == "<%=EnumSurveyType.DCDA.getName() %>"){
                            if (this.series.name == "區域平均") {
                                y = Math.round(parseFloat(${dcnAvgScore}) * 100)/100;
                            }
                            else if (this.series.name == "區域最優") {
                                y = Math.round(parseFloat(${dcnTopScore}) * 100)/100;
                            }
                            else{
                                y = Math.round(parseFloat(${dcnScore}) * 100)/100;
                            }
                        }
                        var color_this = color;
                        if (this.series.name == "區域平均") {
                            color_this = colorAvg;
                        }
                        else if (this.series.name == "區域最優") {
                            color_this = colorTop;
                        }
                        return  '<span style="color:'+ color_this +';">' + this.x + '</span><span>:</span><b>' + y + '</b>';
                    }
                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                margin: [0, 0, 0, 0],
                backgroundColor: "#FFF",
                series: [{
                    pointPlacement: 'on',
                    color:colorAvg,
                    name:"區域平均",
                    data: [${sqsAvgScore},${qsssAvgScore},${msAvgScore},${hicAvgScore},${dcnAvgScore}/8]
                },{
                    pointPlacement: 'on',
                    color:colorTop,
                    name:"區域最優",
                    data: [${sqsTopScore},${qsssTopScore},${msTopScore},${hicTopScore},${dcnTopScore}/8]
                },{dataLabels: {
                        enabled: true
                    },
                    pointPlacement: 'on',
                    color:color,
                    name:"${dealerBase.nickName}",
                    data: [${sqsScore},${qsssScore},${msScore},${hicScore},${dcnScore}/8]
                }],
                plotOptions: {
                    line: {
                        marker: {
                                radius: 3
                                },
                        dataLabels: {
                            enabled:false,
                            formatter: function() {
                                var y = this.y;
                                if (this.x == "<%=EnumSurveyType.SQS.getName() %>") {
                                    y = Math.round(parseFloat(this.y) * 1000)/100;
                                }
                                else if(this.x == "<%=EnumSurveyType.DCDA.getName() %>"){
                                    y = Math.round(parseFloat(this.y) * 800)/100;
                                }
                                return  y ;
                            },
                            style: { fontFamily: 'xxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'}
                        },
                        enableMouseTracking: true
                    }
                },
                legend: {
                    enabled :true,
                    itemWidth:itemWidth,
                    borderWidth:0, 
                    y:5,
                    style: { fontFamily: 'xxxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'}
                }
            };
			
            
            var dailyChartObjOptionEn = {
                    chart: {
                        renderTo: 'div_survey_en',
                        margin: [ 50, 10, 40,10],
                        polar: true,
    	                type: 'line'
                    },
                    title: {
                        text: ("SKN Survey"),
                        floating: true,
                        style: { fontFamily: 'xxxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px',fontSize:'16px'}

                    },
                    pane: {
                        size: '100%'
    	            },
                    xAxis: {
                        categories:['<%=EnumSurveyType.SQS.getName() %>','<%=EnumSurveyType.CSS.getName() %>','<%=EnumSurveyType.MS.getName() %>','<%=EnumSurveyType.OIC.getName() %>','<%=EnumSurveyType.DCDA.getName() %>'],
                        labels: { 
                            style: { 
                                fontFamily: 'xxxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'
                            }
                        },
                        tickmarkPlacement: 'on',
    	                lineWidth: 0
                    },
                    yAxis: {
    	                min: 0,
                        max:100,
                        labels: { 
                            enabled:false,
                            style: { 
                                fontFamily: 'xxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'
                            }
                        }
                    },
                    tooltip: {
                        valueSuffix: '',
                        style: { fontFamily: 'xxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'},
                        formatter: function() {
                        var y = this.y;
                            if (this.x == "<%=EnumSurveyType.SQS.getName() %>") {
                                y = Math.round(parseFloat(this.y) * 1000)/100;
                            }
                            else if(this.x == "<%=EnumSurveyType.DCDA.getName() %>"){
                                if (this.series.name == "Average") {
                                    y = Math.round(parseFloat(${dcnAvgScore}) * 100)/100;
                                }
                                else if (this.series.name == "Best") {
                                    y = Math.round(parseFloat(${dcnTopScore}) * 100)/100;
                                }
                                else{
                                    y = Math.round(parseFloat(${dcnScore}) * 100)/100;
                                }
                            }
                            var color_this = color;
                            if (this.series.name == "Average") {
                                color_this = colorAvg;
                            }
                            else if (this.series.name == "Best") {
                                color_this = colorTop;
                            }
                            return  '<span style="color:'+ color_this +';">' + this.x + '</span><span>:</span><b>' + y + '</b>';
                        }
                    },
                    exporting: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    margin: [0, 0, 0, 0],
                    backgroundColor: "#FFF",
                    series: [{
                        pointPlacement: 'on',
                        color:colorAvg,
                        name:"Average",
                        data: [${sqsAvgScore},${qsssAvgScore},${msAvgScore},${hicAvgScore},${dcnAvgScore}/8]
                    },{
                        pointPlacement: 'on',
                        color:colorTop,
                        name:"Best",
                        data: [${sqsTopScore},${qsssTopScore},${msTopScore},${hicScore},${dcnTopScore}/8]
                    },{dataLabels: {
                            enabled: true
                        },
                        pointPlacement: 'on',
                        color:color,
                        name:"${dealerBase.nickNameEn}",
                        data: [${sqsScore},${qsssScore},${msScore},${hicScore},${dcnScore}/8]
                    }],
                    plotOptions: {
                        line: {
                            marker: {
                                    radius: 3
                                    },
                            dataLabels: {
                                enabled:false,
                                formatter: function() {
                                    var y = this.y;
                                    if (this.x == "<%=EnumSurveyType.SQS.getName() %>") {
                                        y = Math.round(parseFloat(this.y) * 1000)/100;
                                    }
                                    else if(this.x == "<%=EnumSurveyType.DCDA.getName() %>"){
                                        y = Math.round(parseFloat(this.y) * 800)/100;
                                    }
                                    return  y ;
                                },
                                style: { fontFamily: 'xxxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'}
                            },
                            enableMouseTracking: true
                        }
                    },
                    legend: {
                        enabled :true,
                        itemWidth:itemWidth,
                        borderWidth:0, 
                        y:5,
                        style: { fontFamily: 'xxx,Microsoft YaHei, Verdana, Arial',minWidth:'1170px'}
                    }
                };

然後在ajax 中將圖標轉成svg

RadaObj = new Highcharts.Chart(dailyChartObjOption);
RadaObjSVG = RadaObj.getSVG();


後臺接收是這樣子的

 HSSFPatriarch patriarch = (HSSFPatriarch) chineseSheet.createDrawingPatriarch();
        // 2進制流
        // 零售銷量
        if (!StringUtils.isEmpty(retailSalesObjSvg)) {
            retailSalesOut = rasterizer.transcode(new ByteArrayOutputStream(), retailSalesObjSvg, MimeType.PNG, null);
            // 零售銷量
            HSSFClientAnchor anchorOne = new HSSFClientAnchor(100, 50, 923, 205, (short) 9, (short) 15, (short) 12,
                (short) 17);
            patriarch.createPicture(anchorOne,
                wb.addPicture(retailSalesOut.toByteArray(), HSSFWorkbook.PICTURE_TYPE_PNG));

        }

SvgRasterizer svg 轉換的公共類

public class SvgRasterizer {
    /**
     * <p>
     * Description:
     * </p>
     * Field INSTANCE:INSTANCE
     */
    private static final SvgRasterizer INSTANCE = new SvgRasterizer();

    public static final SvgRasterizer getInstance() {
        return INSTANCE;
    }

    /**
     * <p>
     * Description:svg轉換
     * </p>
     * 
     * @param stream 流
     * @param svg svg字符串
     * @param mime mime類型
     * @param width 寬度
     * @return ByteArrayOutputStream 返回值
     * @throws SvgRasterizerException 異常
     * @throws TranscoderException 異常
     * @throws UnsupportedEncodingException 異常
     */
    public synchronized ByteArrayOutputStream transcode(ByteArrayOutputStream stream, String svg, MimeType mime,
        Float width) throws SvgRasterizerException, TranscoderException, UnsupportedEncodingException {
        //TranscoderInput input = new TranscoderInput(new StringReader(svg));
        TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(svg.getBytes("utf-8")));
        TranscoderOutput transOutput = new TranscoderOutput(stream);

        SVGAbstractTranscoder transcoder = getTranscoder(mime);
        if (width != null) {
            transcoder.addTranscodingHint(SVGAbstractTranscoder.KEY_WIDTH, width);
        }

        transcoder.transcode(input, transOutput);
        return stream;
    }

    /**
     * <p>
     * Description:獲取轉換器
     * </p>
     * 
     * @param mime mime類型
     * @return SVGAbstractTranscoder 返回值
     * @throws SvgRasterizerException 異常
     */
    public static SVGAbstractTranscoder getTranscoder(MimeType mime) throws SvgRasterizerException {
        SVGAbstractTranscoder transcoder = null;

        switch (mime.ordinal()) {
            case 0:
                transcoder = new PNGTranscoder();
                break;
            case 1:
                transcoder = new JPEGTranscoder();
                transcoder.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(0.9D));

                break;
            case 2:
                transcoder = new PDFTranscoder();
                break;
            default:
                break;
        }

        if (transcoder == null) {
            throw new SvgRasterizerException("MimeType not supported");
        }

        return transcoder;
    }
}

這樣就可以了

highCharts 轉svg 導出excel

相關推薦

highCharts 轉svg 導出excel

highCharts svg excel 具體的需求是這樣的： 前臺要將查出來的數據用highcharts 展示，包括數據封裝到table中，table 中展示hightchart的圖標，例如這樣這個應該不難實現，那麽這個頁面下面有一個導出按鈕，要將這些數據（table +hightchar

導出excel時，跳轉新空白頁，不要跳轉怎麽改

頁面 iframe open() color one bsp pan nbsp 需要 導出excel的時候，偶爾會出現跳轉到一個新頁面再導出exceljs中用window.open()做跳轉 不想讓它跳轉到新頁面，需要加一個隱藏的iframe <iframe nam

前端導出Excel不跳轉頁面

app 關閉 tar input 示例代碼 nbsp document ola form表單 頁面導出Excel有三種方式： 1.第一種方式比較簡單，a標簽,直接在href中寫下載地址及參數，頁面將會跳轉到地址，然後下載，這種方式很大的弊端，跳轉頁面 例如： <a

POI導出EXCEL經典實現

web.xml face 財務系統 簡介 風格 sage 獲取 {} resp 1.Apache POI簡介 Apache POI是Apache軟件基金會的開放源碼函式庫，POI提供API給Java程式對Microsoft Office格式檔案讀和寫的功能。 .NET的開

ETL工具—Kettle數據的導入導出—Excel表到數據庫

data ttl 文件 啟動 連接 alt block 9.png etl 案例目的：當Excel中有幾萬條記錄或者更多數據時，使用Kettle導入到數據庫中。速度就能感到比復制粘貼快很多。 這裏我會演示將"data.xlsx"表中數據有15萬多條記錄，使用Kettle導

導出excel

esp ica rule cati oid bject pad () all 主要就是把下面表格導出 需要一個aspx頁 做request處理 設置一下response頭 write一個table出去就ok了 public void ExportExc

.Net MVC 導入導出Excel總結(三種導出Excel方法，一種導入Excel方法) 通過MVC控制器導出導入Excel文件(可用於java SSH架構)

ets esp llb pat lencod cnblogs 創建 etime mmd public class ExcelController : Controller { // // GET: /Excel/ M

使用NPOI庫導入導出EXCEL

date 表頭 xssf content mar exc 下標 都是 bool 一、EXCEL 導入（Excel 導入導出實際項目中會被封裝成**Helper 本示例只對簡單功能做演示） NPOI 包引用 視圖view @{ ViewBag.Title = "

bos 第4 (區域excel批量導入、區域通用分頁查詢、分區的添加、分區多條件分頁查詢、分區導出excel)

sea htm 不能 長安 基金會 格式 address ret body BOS項目筆記 第4天 今天內容安排： 1、區域批量導入功能 jQuery OCUpload（一鍵上傳插件）、apache POI、pinyin4j 2、實現區域的分頁查詢 3、對分頁代碼重構

apache poi根據模板導出excel

use 一個 factor exception cep 得到 format 拷貝 return 需要預先新建編輯好一個excel文件，設置好樣式。 編輯好輸出的數據，根據excel坐標一一對應。 支持列表數據輸出，列表中列合並。 代碼如下： package com.ico

原生JavaScript 導出excel表格（兼容ie和其他主流瀏覽器）

toe rip idt exce cti get pad bsp ttext 因同事的需求是想前端導出excel表格，網上找了一些demo，自己修改了一下，可能以後會用到，記錄下來吧，兼容ie和一些主流瀏覽器，ie可能會報錯，原因參考 這裏，edge 瀏覽器還沒有辦法導出，

PHP從數據庫原生導出Excel文件

oot excel表 從數據 echo 對象 gb2312 xls ati 沒有 <?php //這裏三個header文件是為了將數據庫數據導出Excel表格中,必須存在;//設置編碼header(‘Content-type: text/html; charset=u

Java 實現導出excel表 POI

list() tar creates turn 實體 指定位置 com .text orm 1.先導入相關jar包 2.Student.java import java.util.Date; public class Student { pr

ASP.NET導出Excel之二

sql xen utility httputil idt url 屬性 states pan 引用一下dll using org.in2bits.MyXls; 1 public void DaoChuExeclWenTi(string strwhere, st

poi實現導出excel

nbsp puts getc service quest hone obj request write 1.導入poi所需的jar包 解壓後導入其中的jar包 2.實現在瀏覽器中將查詢到的數據導入一個excel文件並實現下載（以學生表為例） @RequestMappi

ExtAspNet依據Grid導出Excel

{0} arp 導出excel eve osi row columns get border protected void Button1_Click(object sender, EventArgs e) { Response.ClearCo

java用freemarker實現導出excel

pla tro tac template src odin cnblogs data ioe 前幾天做了jxl導出excel,現在用freemarker做一下 freemarker導出excel和導出word步驟和是實現方法是相同的。 1.制作excel模板 2.將後綴名改

【機房收費系統C#版】——導出Excel

missing watermark columns 感覺 end 巨人 orm content file 前言 機房合作開始好長了一段時間。反重復復開了幾次會，項目也是一拖再拖，作為組長。有80%的責任都在於我。為了不讓這個項目陪著我過春節。要求自己

基於one2team框架的Highcharts圖表圖片導出方案

exception tchar 官方 過程 author 處理 phi base rtt 這篇文章已經沒有什麽意義了，新版的HIghcharts提供Java圖片導出解決方案，你需要做的就是下個Maven，bulid一個war就Ok了。---addedy on 2

分針網——每日分享：nodejs導出excel實戰

use 內容 bject 順序 type 可用 類型 完全 date 本文轉載：http://www.f-z.cn/id/268 我們都知道nodejs的內存由於v8內存分配機制的原因十分有限 64位系統也只能占1.4G左右, 因此當我們要生成或者讀取大