php+highchats生成动态统计图
更新时间：2014年5月31日 01:00 点击：254
复制代码 代码如下:
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>]
相关文章
- ps动态环绕动画效果是现在很多人都非常喜欢的，大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果，一起来看看...2017-07-06
- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
- 本文介绍两种使用 php 生成二维码的方法。 （1）利用google生成二维码的开放接口，代码如下： /** * google api 二维码生成【QRcode可以存储最多4296个字母数字类型的任意文本，具体可以查看二维码数据格式】 * @param strin...2015-10-21
- 这篇文章主要介绍了Java生成随机姓名、性别和年龄的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-01
- 这篇文章介绍了c#动态调用Webservice的两种方法实例，有需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了C#生成随机数功能,涉及C#数学运算与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 本文详细讲解了SQLServer中执行动态SQL的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2022-05-19
- 想在网页中动态地显示当前系统的时间，找了好多，不过都是一些停在那里不动的。。。不过皇天不负有心人，终于让我找到了...2020-06-25
- 下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
- 经常制作开发不同的网站的后台，写过很多种不同的后台导航写法。 最终积累了这种最写法，算是最好的吧...2013-09-29
- 关于生成唯一数字ID的问题，是不是需要使用rand生成一个随机数，然后去数据库查询是否有这个数呢？感觉这样的话有点费时间，有没有其他方法呢？当然不是，其实有两种方法可以解决。 1. 如果你只用php而不用数据库的话，那时间戳+随...2015-11-24
- 这篇文章主要介绍了C#统计字符串中数字个数的方法,涉及C#遍历字符串并判断数字的技巧,需要的朋友可以参考下...2020-06-25
- 最近由于项目的需要，需要动态的添加和删除table中的tr，感觉用JS可以实现，但是在网上找了一下，单纯的自己写JS，感觉太麻烦，而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法，有需要的朋友们可以参考借鉴。...2016-10-20
- js生成随机数主要用到了内置的Math对象的random()方法。用法如：Math.random()。它返回的是一个 0 ~ 1 之间的随机数。有了这么一个方法，那生成任意随机数就好理解了。比如实际中我们可能会有如下的需要： （1）生成一个 0 - 1...2015-10-21
- 这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇用C++面向对象的方式动态加载so的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-04-25
- 验证码是一个现在WEB2.0中常见的一个功能了，像注册、登录又或者是留言页面，都需要注册码来验证当前操作者的合法性,我们会看到有些网站没有验证码，但那是更高级的验证了，...2016-11-25
- 复制代码 代码如下:function getTagStyle(){ $minFontSize=8; //最小字体大小,可根据需要自行更改 $maxFontSize=18; //最大字体大小,可根据需要自行更改 return 'font-size:'.($minFontSize+lcg_value()*(abs($maxFo...2013-10-04
- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15