php+highchats生成动态统计图实例代码
分享下php+highchats生成动态统计图的方法。
例子：
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] ] }]
主要看这段：
{ name: 'Chrome', y: 12.8, sliced: true, selected: true }
您可能感兴趣的文章：
- Highcharts教程(22) 柱状图例子
- Highcharts教程(21) 条状图例子
- Highcharts教程(20) 曲线图例子二
- Highcharts教程(19) 曲线图例子一
- Highcharts教程(18) xAxis x轴样式二
- Highcharts教程(17) xAxis x轴的样式一
- Highcharts教程(16) tooltip工具提示
- Highcharts教程(15) title标题、subtitle副标题
- Highcharts教程(14) Series数据列选项
- Highcharts教程(13) Pie饼图与其他图形
- Highcharts教程(12) gauge测量图
- Highcharts教程(11) bar条状图、Column柱状图、Columnrange柱状排列图
- Highcharts教程(10) arearange区域排列图VSareaspline区域曲线图VSareasplinerangeVSbar条状图
- Highcharts教程(9) PlotOptions之area区域图
- Highcharts教程(8) Pane窗格选项、PlotOptions绘图选项概览
- Highcharts教程(7) loading加载选项、navigation 选项
- Highcharts教程(6) legend 图例选项
- Highcharts教程(5) Lang语言选项
- Highcharts教程(4) global全局选项和labels标签选项
- Highcharts教程(3) exporting导出和打印选项
- Highcharts教程(2) colors颜色与credits名片选项
- Highcharts教程(1) chart 图表选项
代码：
<!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">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> 以下是php输出json数据，供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: [
<span>]
<span style="white-space:pre"> </span>]
PHP之友评论