Highcharts使用phantomjs匯出圖片

foreverpx發表於2014-12-26
JS

Highcharts使用phantomjs匯出圖片

​Highcharts使用phantomjs匯出圖片

描述

在用Highcharts這個強大的圖示元件時，你一定在某些時刻想把畫出來的圖示匯出為一個圖片並下載到本地。Highcharts本身提供了匯出功能，只需要匯入exporting.js檔案，就可以在圖表右上角找到匯出按鈕了。這已經基本滿足的大多數情況我們的需求。但是這原始到匯出是傳送請求到Highcharts的伺服器上進行轉化的，很多時候我們並不想把我們的資料資訊暴露給他們，所以我們必須在我們自己的伺服器上完成轉化的服務。

步驟一：phantomjs

Highcharts的下載檔案中有個exporting-server資料夾，裡面是Highcharts提供的一系列轉換方案，有java，phantomjs和php的。在這裡，只講述nodejs+phantomjs的方案。

什麼是phantomjs？

phantomjs可以看做是一個不帶gui的瀏覽器，他的核心也是webkit，我們一般用它來載入網頁去解析dom並獲取資料，或者是利用他來對網頁進行截圖。下載完phantomjs並解壓後，將exporting-server資料夾中的phantomjs資料夾拷貝到解壓後的根目錄下。並執行命令

1




phantomjs ./phantomjs/highcharts-convert.js -host 127.0.0.1 -port 3003




執行上面的程式碼後，會開啟一個伺服器並監聽3003埠。這個伺服器用來接收我們傳送的圖表資料，並最終將生成的圖片路徑放回給我們。



步驟二：獲取svg資料併傳送給nodejs Server端



瀏覽器端程式碼：




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17




var obj = {
    infile:$('#container').highcharts().getSVG(),
    constr:"Chart", //圖表型別
    outfile:"E://chart.png" //需要儲存的檔案路徑
};
$.ajax({
    url: "http://localhost:3000/highchartsConvert",
    type: 'POST',
    dataType: 'json',
    data: {
        data:JSON.stringify(obj)
    }
}).done(function(rData){
   download(rData);  //rData為返回的圖片路徑，如果轉換成功的話，跟outfile的值一樣
   //download方法為將檔名或路徑傳遞到後臺，然後nodejs實現檔案下載功能，這裡省略
});




nodejs端:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25




app.post("/highchartsConvert",function(req,res,next){
    var reqData = JSON.parse(req.body.data);
    
    //傳送到phantomjs轉換伺服器
    var options = {
        hostname: "localhost",
        port: "3001",
        path:"",
        method: "POST",
        headers: {
            "Content-Type": 'application/json;charset=utf-8',
            "Content-Length":reqData.length
        }
    };
    var req = http.request(options,function(ress){
        ress.on('data',function(data){
            res.send(data);
        });
    });
    req.write(reqData+"\n");
    req.end();
});




總結



整個轉換過程走了兩個伺服器，首先將圖表資料傳送到nodejs端，然後再轉發到phantomjs的伺服器。中間用node中轉一下是因為要進行某些驗證。

下面是可以傳的引數列表：


  • 
infile：圖表的svg程式碼或者options
  • 
outfile：輸出圖片的路徑+檔名
  • 
constr：圖表型別
  • 
width：圖表在phantomjs中渲染的寬度
  • 
height：圖表在phantomjs中渲染的高度
  • 
callback：圖表在phantomjs中渲染完成後執行

更多資訊請參考
RENDER
 CHARTS ON THE SERVER
IMPROVED
 IMAGE EXPORT WITH PHANTOMJS



文章作者：foreverpx

文章原文連結：Highcharts使用phantomjs匯出圖片



            




相關文章