jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战

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

• 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
• 对个人用户完全免费；
• 纯JS，无BS；
• 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
• 跨语言：不管是php、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
• 提示功能：鼠标移动到图表的某一点上有提示信息；
• 放大功能：选中图表部分放大，近距离观察图表；
• 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
• 时间轴：可以精确到毫秒;

$.ajax({
  dataType: "json",url: url,data: data,success: success
});

$(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]
            }]
        });
    });
    

    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数据

           series: [{
                name: '本月',data: zero
            },{
                name: '对比',data: [26.0]
            }]

实时刷新

$(document).ready(function() {
     
      seTinterval("drawTemp();",5000);
});