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和Firefox等等； 對個人使用者完全免費； 純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, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]            }, {                name: 'London',                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 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就超級牛力了。