ホームページ >バックエンド開発 >PHPチュートリアル >Highchats と PHP を組み合わせて動的な統計グラフを生成します
Highchats と PHP を組み合わせて動的な統計グラフを生成します
- WBOYオリジナル
- 2016-06-23 13:56:51764ブラウズ
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><?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);}?> </body></html> 以下はjs 使用のための php 出力 json データ:
<?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] ]
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。