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

上篇文章中介绍了phantomjs的使用场景，方法。

本篇文章详细介绍使用php，highcharts 结合phantomjs纯后台生成图片。包含一步步详细的php代码

一.highcharts 结合phantomjs纯后台生成图片系列的准备：

下载phantomjs解析插件，从highcharts官方下载所需插件.

新建一个工程文件夹phantomjs,所必备的js文件有:

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

其中jquery.js为 v1.7.1;

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

二.highcharts 结合phantomjs纯后台生成图片系列highcharts-convert.js的使用

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:

1	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.先看一个例子:

1>infile.json:

1 2 3 4 5 6 7 8

{  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]  }] };

使用过highcharts图表的童鞋，一看到这个写法就知道，其实就是对x轴和y轴赋值。详细highcharts的用法，可参考中文文档

2>callback.js:

1 2 3 4 5 6 7

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

关于callback.js的作用，英文是这样解释的:

1	The callback is a function which will be called in the constructor of Highcharts to be executed on chart load. All code of the callback must be enclosed by a function.

本人英文水平一般，在这里就不再翻译，大概的意思就是负责渲染highchart图表，包括坐标位置，什么颜色填充，尺寸大小等参数。

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纯后台生成图片系列生成json串

看到这里，就知道了highcharts 结合phantomjs纯后台生成图片的重点就在于option.js里的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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

/**  * 生成json数据串  */  public function generatecharts()  {  $aperiod = 'month';  $date = date("Y-m");  $date = Yii::app()->request->getParam('date',date("Y-m"));   // 拿到要查询的日期  if(date("m",strtotime($date)) == date("m",time())) // 查询日期是本月时，查询前一天的数据  $date = date("Y-m-d",strtotime("-1 day"));  else  $date = date("Y-m-t",strtotime($date)); // 获取上月最后一天的月数据   $data_type = 3; // 月数据  $org_type = 0; // 整站   // 获取数据，趋势图表展示用  $charts_data = Report::getSplineCharts($date,$data_type,$org_type); // ***************************************************************  $series = $charts_data['yAxisChart1'];  $predictChart = $charts_data['predictChart1'];  $month = $charts_data['month'];  $xAxis = $charts_data['xAxis'];  $text = "$month"."月销售签约目标:".number_format($predictChart);   $result = '';  $start_fake_json = "{";  $result .= $start_fake_json;   $end_fake_json = "  credits: {enabled: false},  chart: {  renderTo: 'chart3',  zoomType: 'xy'  },  legend: {  verticalAlign: 'top',  y: 10,  borderWidth: 1  },   title: {  text: ''  },  xAxis:{  categories: $xAxis,  },   plotOptions: {  series: {  dataLabels: {  enabled: true  },  }  },   yAxis: {  min: 0,  title: {  text: ''  },  gridLineColor:'#EEE',  plotLines: [{  width: 1,  color: '#aa4643',  value: $predictChart,  label: {  text: '$text'  },  zIndex: 1  }],  },  series: $series  }";   $result .= $end_fake_json;  // echo $result;exit;  // 新建文件  $json_file_name = dirname(Yii::app()->BasePath).'/email_png'.'/201507'.'/json/'.date("Y-m-d")."_total_num.json";  // echo $json_file_name;exit;  $fp = fopen($json_file_name, "w+"); // 打开文件指针，创建文件  if(!is_writable($json_file_name))  {  die("文件:".$json_file_name."不可写，请检查!");  }  fwrite($fp,$result);  fclose($fp);   return $json_file_name;   }

上面的方法，简要总结一下就是从表中读取想要拿到的数据，然后，拼装成highcharts格式的字符串，这样，前面一直说的json串就生成了，下一步就是愉快的采用命令行去调用了。

1 2 3 4 5 6 7 8 9 10 11

// 拿到 json       $infile = $this->generatecharts(); $highcharts_convert = "....../highcharts-convert.js" ; //此处是highcharts_convert.js文件的绝对路径 $outfile = "....../img" ;  // 此处是生成的图片要存放的路径，可根据你的需要自行设置   本项目我是使用的yii的console command来执行php脚本的. // 执行命令 $command = "phantomjs $highcharts_convert -infile $infile -outfile $outfile -scale 2.5 -width 800 -constr Chart"; // 放在命令行执行 exec($command,$output,$return_var); // ......

附上我最终的结果图:

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

四.总结

1. 纯后台生成highcharts图片首先选对神器phantomjs;
2. 弄清楚highcharts-convert.js的用法
3. 有思路写清楚提供数据的这个json串怎么生成
4. callback.js这个回调函数来渲染图片
5. 最后，图片就生成了，大功告成。

五.参考
1.http://javascript.ruanyifeng.com/tool/phantomjs.html
2.http://www.highcharts.com/docs/export-module/render-charts-serverside
3.