highcharts 結合phantomjs純後臺生成圖片

highcharts 結合phantomjs純後臺生成圖片

highcharts 這個圖表展現插件我想你們應該都知道，純javascript編寫，相比那些flash圖表插件有很大的優點，至少瀏覽器不用考慮是否裝了flash插件，功能也很是的強大，詳細請看官網 ，我就不作多介紹了。

那今天我們討論的難題是咱們平時用highchart生成圖片時，首先要在前端展現出圖表，而後經過圖表的API 按鈕或者自定義的按鈕 來向後臺發起請求，後臺獲取到圖片的SVG信息時，而後根據SVG的信息生成對應的圖片或者PDF文件輸出到流供客戶端下載或者直接保存在服務端。

那麼這個圖片生成必須依賴前臺生成的圖表來觸發，那有些圖片咱們又想自動生成又不須要前端，生成後直接經過郵件發送或者寫入word文件，該如何作呢？

有人會想能夠模擬前臺自動向後臺發送請求，我這樣試過，效率很是不敬人意！後來看了官方的一些介紹，引入了phantomjs 這個好東西，它是個javascript引擎庫，基於webkit內核，能解析前臺的HTML及javascript並生成對應的圖片，最重要的一點是它可以以服務的形式獨立運行在後端，接下來是詳細步驟：

• 下載phantomjs，在網站任意目錄下新建一個文件夾放入 phantomjs.exe 和highchart官方出的 phantomjs解析插件highcharts-convert.js和一些相關js以下圖所示：

  註解： 紅線方框的是必備文件。

• 準備好這些文件後，咱們開始來寫後臺代碼（這裏我用的C#，其餘語言也應該有對應的寫法，就是調用exe文件有點點區別）

  1

  /// <summary> /// 控制檯應用程序處理保存圖片 /// </summary> /// <param name="ListChartJsonPath">圖片數組</param> /// <returns>返回hashtable</returns> private Hashtable HandleImages(List<string> ListChartJsonPath) { #region 啓動進程保存圖片 Hashtable ht = new Hashtable(); for (int i = 0; i < ListChartJsonPath.Count; i++) { Process p = new Process(); p.StartInfo.FileName = Server.MapPath(@"\GenerateImage\phantomjs.exe"); //定義圖片名稱 string filename = "divchart" + (i + 1).ToString() + Guid.NewGuid().ToString(); ht.Add("divchart" + (i + 1).ToString(), filename); string outfile = Server.MapPath(@"\ImageTemp\" + filename + ".png"); string infile = ListChartJsonPath[i]; string ExcuteArg = Server.MapPath(@"\GenerateImage\highcharts-convert.js") + " -infile " + infile + " -outfile " + outfile + " -scale 2.5 -width 700 -constr Chart"; p.StartInfo.Arguments = string.Format(ExcuteArg); p.StartInfo.CreateNoWindow = true; p.StartInfo.UseShellExecute = false; //重定向標準輸出 p.StartInfo.RedirectStandardOutput = true; //重定向錯誤輸出 p.StartInfo.RedirectStandardError = false; ; p.StartInfo.WindowStyle = ProcessWindowStyle.Normal; if (!p.Start()) { throw new Exception("沒法啓動Headless測試引擎."); } //string[] result = p.StandardOutput.ReadToEnd().Split(new char[] { '\r', '\n' }); p.WaitForExit(); p.Close(); } return ht; #endregion }

分析：

這段代碼你們應該不會太陌生，主要是調用web應用程序下的 phantomjs.exe 無窗口模式，它有幾個參數須要爲你們解釋下，outfile是輸出的圖片路徑，infile是輸入圖片的參數，格式和生成圖表的寫法一致，能夠是json，也能夠是一個js文件。（有部分人不太理解infile ，實際就是傳入json格式文本，我highchart全部圖片數據都是事先生成好json文件，上面ListChartJsonPath集合實際上保存了全部圖片json的路徑，將此路徑傳入phantomjs會根據 highcharts-convert.js 去解析json），width是寬度。這裏定義了一個hashtable用來存放圖片的名稱和和路徑，最後返回hashtable。
下面是事先生成好的json文件如如下截圖的文件，文件裏的內容就是json文本：

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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

{ chart: { width: 650, type: "line" }, yAxis: { title: { text: '' }, allowDecimals: false, max:"100" }, xAxis: { categories: [ "2013-06-01", "2013-06-02", "2013-06-03", "2013-06-04",], labels: { rotation: -45, align: 'right' } }, navigation: { buttonOptions: { enabled: false } }, legend: { reversed: false, borderWidth: 0, backgroundColor: '#FFFFFF', shadow: false, itemStyle: { color: '#000000' } }, credits: { enabled: false }, plotOptions: { series: { dataLabels: { enabled: true, y: -10 } }, bar: { dataLabels: { enabled: true }, color: '#8DB241' }, }, title: { text: "test" }, subtitle: { text: '' }, series: [{name:'test',data:[ 100.0, 100.0, 100.0, 100.0]}] }

 

---

總結與梳理

1. 準備相關文件
2. 準備生成圖片的json文件，這個json文件能夠批量生成，請看上面截圖，我是如何批量生成的？我在文件夾的目錄下建了一個通用的highchart json模板文件(如我上面截圖裏的 OptionsTemp.json 文件)，這個文件將報表的 通用參數給抽離出來，後臺生成json文件裏直接讀取這個文件，而後從數據庫獲取數據替換json裏面的變量從新生成一份新的json文件。
3. 後臺方法調用phantomjs.exe 傳入圖片生成的路徑、json文件(或者json)，定義圖片的寬度和質量
4. 最後生成完畢，如何處理接下來的圖片就看大家本身的業務需求了

另外還有一種方式是將phantomjs部署成服務，一直運行着，後臺發送請求給這個服務生成圖片，
java和php web服務版本請參考 http://www.highcharts.com/docs/export-module/setting-up-the-server
.net web版請參考 https://github.com/imclem/Highcharts-export-module-asp.net
部署 phantomjs.exe webServer 版本請參考 http://www.highcharts.com/docs/export-module/render-charts-serverside

---

很高興你們關注個人文章，最近不少人發郵件給我留言讓我分享下代碼，知足你們的要求，提供了一個.NET winform 版本的項目。裏面函蓋 利用phantomjs 截取網頁快照 及 純後臺生成 highchart 圖片。

下載地址：點擊此處下載DEMO