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.

时间： 2024-09-30 19:19:39

highcharts 结合phantomjs纯后台生成图片系列二之php2的相关文章

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

上篇文章中介绍了phantomjs的使用场景,方法.本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片. 一.准备: 下载phantomjs解析插件,从 highcharts官方 下载所需插件. 新建一个工程文件夹名位:phantomjs,所必备的js文件有: 其中jquery.js为v1.7.1; highcharts-convert.js的下载地址可去 github上下载 . highcharts官方文档有关于highcharts-convert.js的使

Highcharts使用phantomjs导出图片

Highcharts使用phantomjs导出图片 ?Highcharts使用phantomjs导出图片 描述 在用Highcharts这个强大的图标组件时,你一定在某些时刻想把画出来的图标导出为一个图片并下载到本地.Highcharts本身提供了导出功能,只需要导入exporting.js文件,就可以在图表右上角找到导出按钮了.这已经基本满足的大多数情况我们的需求.但是这原始到导出是发送请求到Highcharts的服务器上进行转化的,很多时候我们并不想把我们的数据信息暴露给他们,所以我们必须在

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProperty)只能拥有一个binding. 这一点可以通过设置binding对象的方法名得知: public static BindingExpressionBase SetBinding( DependencyObject target, DependencyProperty dp, BindingB

Android后台杀死系列之一：FragmentActivity及PhoneWindow后台杀死处理机制

App在后台久置后,再次从桌面或最近的任务列表唤醒时经常会发生崩溃,这往往是App在后台被系统杀死,再次恢复的时候遇到了问题,而在使用FragmentActivity+Fragment的时候会更加频繁.比如,如果Fragment没有提供默认构造方法,就会在重建的时候因为反射创建Fragment失败而崩溃,再比如,在onCreate里面new 一个FragmentDialog,并且show,被后台杀死后,再次唤醒的时候,就会show两个对话框,这是为什么?其实这就涉及了后台杀死及恢复的机制,其中涉

Cordova Android源码分析系列二（CordovaWebView相关类分析）

本篇文章是Cordova Android源码分析系列文章的第二篇,主要分析CordovaWebView和CordovaWebViewClient类,通过分析代码可以知道Web网页加载的过程,错误出来,多线程处理等. CordovaWebView类分析 CordovaWebView类继承了Android WebView类,这是一个很自然的实现,共1000多行代码.包含了PluginManager pluginManager,BroadcastReceiver receiver,CordovaInt

数据分页模块系列 (二) 完美封装PageModel实现分页模块

先说一下框架分页技术,在我们之前那个高校项目中使用DWZ实现的分页用了自定义标签使用起来也比较方便,除了DWZ很多框架已经给我们做好了分页我们需要做的仅仅是把一些分页参数传给我们的框架,俗话说你用别人的东西就得按着别人的来,得按着别人的框架进行布局了.传参了等等,这样灵活性大大降低,况且感觉使用框架频繁的一些软件一般是一些管理类型的,对界面的美观方便需求并不是很高,工整.能用就可以,然而呢,还有些界面需要灵活配置分页按钮.分页条等,这就需要把类似于这样的功能封装起来. 分页的模块很多人都在写都在

玩玩asp.net 2.0的caching系列二 - RemoveOutputCacheItem

在asp时代,要作cache通常是用application来存数据, 要完整一点的.就是自己写个class来操作application控制要cache的数据. 但是在asp.net,页面要cache变得简单许多. 只要一行 就可以了, 但是,现在问题又来了, 客户希望后台新增完后他要立即可以从前台看到更新的数据. 先前在网络上看到是有说只要页面有修改outputcache就会被清除. 但是...这是在测试时候的方式, 在production环境的页面应该是不能让客户每次更新完就去动一下页面. 要

iOS开发UINavigation系列二——UINavigationItem

iOS开发UINavigation系列二--UINavigationItem 一.引言 UINavigationItem是导航栏上用于管理导航项的类,在上一篇博客中,我们知道导航栏是通过push与pop的堆栈操作来对item进行管理的,同样,每一个Item自身也有许多属性可供我们进行自定制.这篇博客,主要讨论UINavigationItem的使用方法. UINavigationBar:http://my.oschina.net/u/2340880/blog/527706. 二.来说说UINavi