highchats与php组合生成动态统计图

highchats与php结合生成动态统计图

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}

			<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}%'            },            plotOptions: {                pie: {                    allowPointSelect: true,                    cursor: 'pointer',                    dataLabels: {                        enabled: true,                        color: '#000000',                        connectorColor: '#000000',                        formatter: function() {                            return '<b>'+ this.point.name +': '+ this.percentage +' %';                        }                    }                }            },            series: [{                type: 'pie',                name: 'Browser share',                data: ds,            }]        });    });    		</script>		<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><?phparea ();/** * 地区接口 * 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);}?>	

以下是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>]