This article details the use of PHP, HighCharts combined with Phantomjs pure background to generate pictures. Including step -by -step PHP code
1. Highcharts combined with Phantomjs pure background to generate picture series preparation:
download Phantomjs parsing plug -in, fromHighcharts officialDownload the required plug -in.
Newly create a project folder PHANTOMJS, the necessary JS files are:
Highcharts combined with Phantomjs pure background to generate pictures series two PHP
Among them, jquery.js is v1.7.1;
highcharts-confrt.js download address can be availablegithub download.
two .highcharts combined with Phantomjs pure background generating picture series Highcharts-Convert.js
Highcharts official documentation about 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
|
Parameters are as follows:
Highcharts combined with Phantomjs pure background to generate pictures series two PHP
For details, please clickHere.
When we know that when HighCharts is displayed on the page, first take the data from the table through the PHP, assemble the array, and pass JSON string to HighCharts.
So see the above command line, we probably know that placing json in the Option.js file, so is it?
1. First look at an example:
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]
}]
};
|
Children’s shoes that have used Highcharts charts, as soon as you see this writing, you know that it is actually assigning the X and Y axis. Detailed use of highcharts, please refer toChinese document
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();
}
|
On the role of callback.js, English is explained:
|
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.
|
I am average English in English, and I will not translate here. It is probably responsible for rendering Highchart charts, including coordinates, what color filling, size and other parameters.
3> Execution:
phantomjs highcharts-convert.js -infile infile.json -callback callback.js -outfile a.png -width 2400 -constr Chart -scale 1
4> After returning, the output is as follows:
Highcharts combined with Phantomjs pure background to generate pictures series two PHP
5> Take a look at the Phantomjs directory and generate an A.PNG:
Highcharts combined with Phantomjs pure background generating pictures
Obviously, this is a picture generated by HighCharts. Just tell us that the previous guess is right:
- JSON string that provides the data is placed in infile.json;
- By rendering by the callback function callback.js, a picture of Highchaarts was born
3.highcharts combined with Phantomjs pure background generating picture series to generate JSON string
Seeing this, I know that HighCharts combines Phantomjs pure background to generate pictures
The focus ofis how the JSON string in Option.js is generated.
Below a method written in my project to generate this JSON string:
|
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
|
/**
* Generate JSON data string
*/
public function generatecharts()
{
$aperiod ='month';
$date =date("Y-m");
$date = Yii::app()->request->getParam('date',date("Y-m"));
// get the date to be queried
if(date("m",strtotime($date)) == date("m",time()))// The query date is the data of the day before this month, the data of the day before the query
$date =date("Y-m-d",strtotime("-1 day"));
else
$date =date("Y-m-t",strtotime($date));// Get the monthly data of the last day of the last month
$data_type = 3; // monthly data
$org_type = 0; // whole station
// Obtain data, trend chart display
$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"."Monthly sales signing target:".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;
// New File
$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+");// Open the file pointer and create files
if(!is_writable($json_file_name))
{
die("File:".$json_file_name."Do not write, please check!");
}
fwrite($fp,$result);
fclose($fp);
return $json_file_name;
}
|
The above method, briefly summarize the data you want to get from the table, and then assemble it as a string in Highcharts format. In this way, the JSON string mentioned earlier is generated. The command line is called.
|
1
2
3
4
5
6
7
8
9
10
11
|
// Get JSON
$infile =$this->generatecharts();
$highcharts_convert ="....../highcharts-convert.js" ;// Here is the absolute path of highCharts_convert.js file
$outfile ="....../img" ; // Here is the path to the generated picture to be stored, you can set it by yourself according to your needs
This project I use yii's console commit to execute the PHP script.
// execute commands
$command ="phantomjs $highcharts_convert -infile $infile -outfile $outfile -scale 2.5 -width 800 -constr Chart";
// Put in the command line for execution
exec($command,$output,$return_var);
// ......
|
Attach my final result chart:
Highcharts combined with Phantomjs pure background to generate pictures series two PHP
4. Summary
- Pure background generates HighCharts pictures first selected the right artifact Phantomjs;
- The usage of HighCharts-Convert.js
- How to generate the JSON string that provides the data clearly
- callback.js this callback function to render pictures
- In the end, the picture was generated, and the great achievements were achieved.
5. Reference
1.http://javascript.ruanyifeng.com/tool/phantomjs.html
2.http://www.highcharts.com/docs/export-module/render-charts-serverside
3.3
Original address: http://www.cnblogs.com/firstdream/p/5122794.html
This article Address: http://blog.csdn.net/aerchi/article/details/53784503