highcharts用法php的json输出

最新推荐文章于 2022-12-23 14:23:55 发布

lumengabc

最新推荐文章于 2022-12-23 14:23:55 发布

阅读量1.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/webnoties/article/details/17219531

版权

javascript 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

//仔细看官方源码的例子

比如这个例子：

   
           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>

ps:看下服务端的代码和前端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]
					]
            ,

lumengabc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts用法php的json输出

//仔细看官方源码的例子比如这个例子： series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8],
复制链接

扫一扫

专栏目录

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]
	]
	}]

highcharts用法php的json输出

“相关推荐”对你有帮助么？