highcharts 結合phantomjs純後臺生成圖片系列二之php

上篇文章中介紹了phantomjs的使用場景，方法。本篇文章詳細介紹使用php，highcharts 結合phantomjs純後臺生成圖片。

一.準備：

下載phantomjs解析插件，從 highcharts官方 下載所需插件.

新建一個工程文件夾名位:phantomjs,所必備的js文件有:

highcharts 結合phantomjs純後臺生成圖片系列二之php

highcharts 結合phantomjs純後臺生成圖片系列二之php

其中jquery.js爲v1.7.1;

highcharts-convert.js的下載地址可去 github上下載 .

highcharts官方文檔有關於highcharts-convert.js的使用介紹：

PhantomJS is started from the command line with our highcharts-convert.js script as first parameter. With the other command line parameters we pass over the Highcharts configuration, the name of the output file and parameters for the graphical layout. Example usage on the command line:

phantomjs highcharts-convert.js -infile options.js -outfile chart.png -scale 2.5 -width 300

參數說明以下:

highcharts 結合phantomjs純後臺生成圖片系列二之php

詳細說明請點 這裏 .

咱們知道highcharts在頁面上展現時，是先經過php從表中取出數據後，組裝好數組後，以json串傳給highcharts便可。

那麼看見上面的命令行，咱們大概知道把 json串放在option.js文件裏便可，那麼，是否是這樣呢？先看一個例子:

1.infile.json:

{ xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }]};

2.callback.js:

function(chart) { chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({ fill : '#FCFFC5', stroke : 'black', 'stroke-width' : 1 }).add();}

3.執行：

phantomjs highcharts-convert.js -infile infile.json -callback callback.js -outfile a.png -width 2400 -constr Chart -scale 1

4.回車後，輸出以下：

highcharts 結合phantomjs純後臺生成圖片系列二之php

5.看看phantomjs目錄下，生成了一個a.png:

highcharts 結合phantomjs純後臺生成圖片

很明顯，這就是一個由highcharts生成的圖片。也就告訴咱們以前猜測的是對的：

1.將提供數據的json串放入infile.json裏;

2.經過在回調函數callback.js來渲染，就生了一張highchaarts圖片;