Home > Article > Backend Development > Combining highchats with php to generate dynamic statistical charts_PHP tutorial
Combining highchats with php to generate dynamic statistical charts_PHP tutorial
- WBOYOriginal
- 2016-07-13 10:29:20658browse
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]Watch this paragraph mainly:
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FusionCharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var ds = [{"name":"\u4e0a\u6d77","y":28.2},{"name":"\u5317\u4eac","y":48.2},{"name":"\u5e7f\u4e1c","y":18.2}];
//其实只要按照例子中的json显示方式展示就行了,如chrome。
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: ds,
}]
});
});
</script>
</head>
<body>
<script src="js/hc.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<?php
area();
/**
* 地区接口
* name名称
* y数据值
*
*/
function area()
{
$b = array(
array('name'=>'上海', 'y'=>28.2),
array('name'=>'北京', 'y'=>48.2),
array('name'=>'广东', 'y'=>18.2),
);
$data = json_encode($b);
echo($data);
}
?>
</body>
</html>
The following is the json data output by php for use by js:
<?php
$strs = @file("/proc/net/dev");
for ($i = 2; $i < count($strs); $i++ )
{
preg_match_all( "/([^\s]+):[\s]{0,}(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/", $strs[$i], $info );
/* $NetInput[$i] = formatsize($info[2][0]);
$NetOut[$i] = formatsize($info[10][0]);
*/
$tmo = round($info[2][0]/1024/1024, 5);
$tmo2 = round($tmo / 1024, 5);
$NetInput[$i] = $tmo2;
$tmp = round($info[10][0]/1024/1024, 5);
$tmp2 = round($tmp / 1024, 5);
$NetOut[$i] = $tmp2;
}
$arr = array();
if (false !== ($strs = @file("/proc/net/dev"))) :
for ($i = 2; $i < count($strs); $i++ ) :
preg_match_all( "/([^\s]+):[\s]{0,}(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/", $strs[$i], $info );
$arr[$i]["name"] = $info[1][0];
$arr[$i]["data"][0] = $NetInput[$i];
$arr[$i]["data"][1] = $NetOut[$i];
endfor;
endif;
echo(json_encode($arr));输出：
{"2":{"name":"lo","data":[0,0]},"3":{"name":"eth0","data":[0.40377,0.00353]}}
js调用:
series: [ ds[2], ds[3] ]
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Share the solution to the conflict between the $ dollar sign and Zen Coding in PHP_PHP TutorialNext article：Share the solution to the conflict between the $ dollar sign and Zen Coding in PHP_PHP Tutorial