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 

}

 

代码:

<!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)