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图片;