Heim > Artikel > Backend-Entwicklung > highchats与php结合生成动态统计图_PHP教程

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

WBOYOriginal: 2016-07-13 10:29:20660Durchsuche

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: [
						ds[2], ds[3]
					]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：php中$美元符号与Zen Coding冲突问题解决方法分享_PHP教程Nächster Artikel：Windows(Vertrigo)下Apache与Tomcat的整合_PHP教程

In Verbindung stehende Artikel

Mehr sehen