Posted in PHP onMay 21, 2014
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 }
<!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>
以下是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 style="white-space:pre"> </span>ds[2], ds[3] <span style="white-space:pre"> </span>]
php+highchats生成动态统计图
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@