php ajax实时柱状图,jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战...

因为项目需要打算把原来做的比赛的东西，迁移到Angular JS上面，但是发现要熟悉使用起来还需要一段时间，旧的框架就是现有的jQuery+JSON+Highcharts+AJAX。

数据格式如下所示的JSON:

{

title: "from android",led: true,temperature: 24,more: "2013年06月23日 14:24:31",humidity: 142,smoke: 8,infrared: false,tel: false,msg: false

}

HIGHCHARTS

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

对个人用户完全免费；

纯JS，无BS；

支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；

跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

提示功能：鼠标移动到图表的某一点上有提示信息；

放大功能：选中图表部分放大，近距离观察图表；

易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

时间轴：可以精确到毫秒;

不过因为项目原因，所以可能不会再使用这个，只对个人免费，现在的考虑是基于D3做一个新的。

Highcharts支持直接导出图表，上图就是导出的温度走势，目测是在24~25之间。

jQuery AJAX使用

基础用法可见方网，如下所示

$.ajax({

dataType: "json",url: url,data: data,success: success

});

注意: json和jsonp的不同在于,ajax不支持跨站，jsonp就这样产生了，需要加上回调，就可以跨站。

一开始没有注意到这个问题，于是将API放到不同听地方去。。。最后只好调回来，因为比较简单。

HIGHCHARTS使用

$(function () {

$('#container').highcharts({

title: {

text: 'Monthly Average Temperature',x: -20 //center

},subtitle: {

text: 'Source: WorldClimate.com',x: -20

},xAxis: {

categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']

},yAxis: {

title: {

text: 'Temperature (°C)'

},plotLines: [{

value: 0,width: 1,color: '#808080'

}]

},tooltip: {

valueSuffix: '°C'

},legend: {

layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0

},series: [{

name: 'Tokyo',data: [7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]

},{

name: 'New York',data: [-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]

},{

name: 'Berlin',data: [-0.9,0.6,3.5,8.4,13.5,18.6,17.9,14.3,9.0,3.9,1.0]

},{

name: 'London',data: [3.9,4.2,8.5,11.9,15.2,16.6,14.2,10.3,6.6,4.8]

}]

});

});

官网的示例给人一看就简单易懂，接下来我们需要将三者结合到一起。

Highcharts+AJAX

highcharts的series直接data用的是数组，我们只需要将json获取的温度数组push到一个新建的数组里面就可以完成工作了。

var zero = [];

$.getJSON('/api/v1/?format=json',function(json) {

$.each(json,function(key,val) {

zero.push(val.temperature);

});

一开始定义一个空数组zero，如果获取'/api/v1/?format=json'这个JSON数据成功，变量json就是存储json数据

each中的key对应的是key,val对应的是value，将温度值存入zero再放入上面的数据中。一个简单的对比

(转载标注源自

Phodal's Blog

)

series: [{

name: '本月',data: zero

},{

name: '对比',data: [26.0]

}]

实时刷新

假设我们上面写的是drawTemp()函数，5000ms的刷新，那么就是:

$(document).ready(function() {

setInterval("drawTemp();",5000);

});

效果如图所示

加上jQuery Mobile就超级牛力了。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。