本篇文章詳細介紹使用php，highcharts 結合phantomjs純後臺生成圖片。包含一步步詳細的php代碼
一.highcharts 結合phantomjs純後臺生成圖片系列的準備：
下載phantomjs解析插件，從highcharts官方下載所需插件.javascript
新建一個工程文件夾phantomjs,所必備的js文件有:php
highcharts 結合phantomjs純後臺生成圖片系列二之phphtml
其中jquery.js爲 v1.7.1;java
highcharts-convert.js的下載地址可去github上下載.jquery
二.highcharts 結合phantomjs純後臺生成圖片系列highcharts-convert.js的使用
highcharts官方文檔有關於highcharts-convert.js的使用介紹：git
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:github
|
1
|
phantomjs highcharts-convert.js -infile options.js -outfile chart.png -scale 2.5 -width 300
|
參數說明以下:json
highcharts 結合phantomjs純後臺生成圖片系列二之phpapi
詳細說明請點這裏.數組
咱們知道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生成的圖片。也就告訴咱們以前猜測的是對的：
- 將提供數據的json串放入infile.json裏;
- 經過在回調函數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
四.總結
- 純後臺生成highcharts圖片首先選對神器phantomjs;
- 弄清楚highcharts-convert.js的用法
- 有思路寫清楚提供數據的這個json串怎麼生成
- callback.js這個回調函數來渲染圖片
- 最後，圖片就生成了，大功告成。
五.參考1.http://javascript.ruanyifeng.com/tool/phantomjs.html2.http://www.highcharts.com/docs/export-module/render-charts-serverside3.