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