Highcharts使用phantomjs匯出圖片，

Highcharts使用phantomjs匯出圖片，
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端

瀏覽器端代碼：

1234567891011121314151617

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端:

12345678910111213141516171819202122232425

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