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]

					]



												


											
highchats与php结合生成动态统计图的更多相关文章
	

    
								
  1. 告别.NET生成报表统计图的烦恼
		
    告别.NET生成报表统计图的烦恼 标签: 报表.netstatistics图形数据库文档 2009-10-09 12:00 635人阅读 评论(0) 收藏 举报  分类: .net程序设计(C#)(2 ...
    
		
    2. 
						
  2. ABP项目中使用Swagger生成动态WebAPI
		
    本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...
    
		
    3. 
						
  3. T-SQL Recipes之生成动态列表数据
		
    Problem 首先什么是动态列表?举个示例,假设你想输出以逗号分隔的IDs,如: 1,45,67,199,298 Solution 生成动态列表数据在我们生活场景中很常见,比如在 Dynamic P ...
    
		
    4. 
						
  4. 【转】Hibernate利用@DynamicInsert和@DynamicUpdate生成动态SQL语句
		
    原文链接:http://www.cnblogs.com/quanyongan/p/3152290.html 最近在使用Hibernate4中,发现两个很有奥秘的注解 @DynamicInsert 和  ...
    
		
    5. 
						
  5. DB2存储过程实现查询表数据，生成动态SQL，并执行
		
    一.动态执行SQL PREPARE S1 FROM 'delete from test'; EXECUTE S1; 二.使用游标 DECLARE V_CURSOR CURSOR FOR SELECT  ...
    
		
    6. 
						
  6. Linux生成动态库系统
		
    Linux生成动态库系统 一个.说明 Linux下动态库文件的扩展名为 ".so"(Shared Object). 依照约定,全部动态库文件名称的形式是libname.so(可能在 ...
    
		
    7. 
						
  7. 如何用phpcms将静态网页生成动态网页？
		
    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...
    
		
    8. 
						
  8. 如何使用 VS生成动态库？
		
    如何使用 VS生成动态库? //.cpp 文件默认定义了 __cplusplus 宏 #ifdef __cplusplus extern "C"{ #endif xxx #ifde ...
    
		
    9. 
						
  9. CGLIB 和 JDK生成动态代理类的区别（转）
		
    文章转自http://luyuanliang.iteye.com/blog/1137292 AOP 使用的设计模式就是代理模式,是对IOC设计的补充.为了扩展性,往往会加上反射,动态生成字节码,生成代 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 在MySQL中创建实现自增的序列（Sequence）的教程
			
    这篇文章主要介绍了在MySQL中创建实现自增的序列(Sequence)的教程,分别列举了两个实例并简单讨论了一些限制因素,需要的朋友可以参考下 项目应用中,曾有以下一个场景: 接口中要求发送一个int ...
    
			
    2. 
						
  2. jar 包和批量处理
			
    打jar包: 选择要打包的文件: javac -d . Hello.java .代表打包的目标路径 jar cvf test.jar com  //test是打包名称,com是打包的文件夹 修改tes ...
    
			
    3. 
						
  3. UVa12563(DP)
			
    题意:求在给定时间内,最多能唱多少歌曲,在最多歌曲的情况下,使唱的时间最长. 该题类似于01背包问题,可用01背包问题的解题思路来求,每个歌曲相当于物品,歌曲的长度相等于物品重量,每个歌曲的“价值”为 ...
    
			
    4. 
						
  4. java时间验证工具
			
    可以验证2014-02-21这种错误
    
			
    5. 
						
  5. android application 的使用
			
    参考http://oyeal.iteye.com/blog/941183 由于intent能够传送的对象类型非常有限  因此有些很多类都要用到的变量我们放在Application中  很像web中的s ...
    
			
    6. 
						
  6. dump文件定位程序崩溃代码行
			
    1.dump文件 2.程序对应的pdb 步骤一:安装windbg 步骤二:通过windbg打开crash dump文件 步骤三:设置pdb文件路径,即符号表路径 步骤四:运行命令!analyze -v ...
    
			
    7. 
						
  7. C++模板：Dijkstra+优先队列
			
    #include <cstdio> #include <cstring> #include <queue> #include <utility> usi ...
    
			
    8. 
						
  8. HDU 1240 Asteroids!
			
    三维广搜 #include <cstdio> #include <iostream> #include <cstring> #include <queue&g ...
    
			
    9. 
						
  9. Oracle 日期时间
			
    select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from goods t insert into goods (id,createdate) value ...
    
			
    10. 
						
  10. 【Java线程】Lock、Condition
			
    http://www.infoq.com/cn/articles/java-memory-model-5  深入理解Java内存模型(五)——锁 http://www.ibm.com/develope ...
    
			
    11.