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就超级牛力了。

原文链接：https://www.f2er.com/json/290347.html