码迷,mamicode.com
首页 > Web开发 > 详细

highcharts 结合phantomjs纯后台生成图片系列二之php

时间:2016-01-11 01:23:28      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

上篇文章中介绍了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图片;

highcharts 结合phantomjs纯后台生成图片系列二之php

标签:

原文地址:http://www.cnblogs.com/firstdream/p/5119955.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!