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匯出圖片








相關文章