[CF, Learning Algorithm -Four -star] CodeForcess 689d FRIENDS and SUBSEQUENCES (RMQ+Two points) David

2023-01-23   ES  

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:

  1. JSON string that provides the data is placed in infile.json;
  2. 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

  1. Pure background generates HighCharts pictures first selected the right artifact Phantomjs;
  2. The usage of HighCharts-Convert.js
  3. How to generate the JSON string that provides the data clearly
  4. callback.js this callback function to render pictures
  5. 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

source

Related Posts

Use TIKA to read each file data NED

FreertOS’s understanding of the priority macro

View patient’s scanning HU value distribution situation NEVER

[Dry -sharing] Teacher Wu Enda’s video tutorial

[CF, Learning Algorithm -Four -star] CodeForcess 689d FRIENDS and SUBSEQUENCES (RMQ+Two points) David

Random Posts

Asterisk call process

“Expect DP” POJ2096: Collecting Bugs

SpringBoot the order of the default access path of static files such as HTML and other static files

Matplotlib The difference between Matshow and imshow in Matplotlib

Java Convention