最小物聯網系統（六）——Ajax打造視覺化

最後效果見:http://b.phodal.com/

程式碼位置:http://b.phodal.com/js/app.js

我覺得似乎我把這個程式碼寫長了，但是我不是故意，只是必需的。先觀察Ajax部分：

Ajax

剝離後的Ajax部分程式碼如下所示，主要用的是jQuery框架的getJSON來實現的

var dataLength = [];

function drawTemp() {
    var zero = [];
    $.getJSON('/athome/', function(json) {
        var items = [];
        dataLength.push(json.length);
        $.each(json, function(key, val) {
            zero.push(val.temperature);
        });
};

實際上，我們做的只是從/athome/下面獲取資料，再將資料堆到陣列裡面，再把這部分放到圖形中。等等，什麼是Ajax?

• AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
• AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
• AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。

JSON我們前面也已經瞭解過了，看看getJSON吧。

jQuery. getJSON

方法定義：jQuery.getJSON( url, data, callback )

通過get請求得到json資料

• ·url用於提供json資料的地址頁
• ·data(Optional)用於傳送到伺服器的鍵值對
• ·callback(Optional)回撥函式，json資料請求成功後的處理函式

我想你似乎應該懂得了一點，就是在不重新整理網頁的同時，用javascript獲取資料放到圖表上，就這麼簡單。

HighChart

再省去一部分，摘自我原來的部落格

HIGHCHARTS Highcharts是一個製作圖表的純Javascript類庫，主要特性如下：

• 相容性：相容當今所有的瀏覽器，包括iPhone、IE和火狐等等；
• 對個人使用者完全免費；
• 純JS，無BS；
• 支援大部分的圖表型別：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖；
• 跨語言：不管是PHP、Asp.net還是Java都可以使用，它只需要三個檔案：一個是Highcharts的核心檔案highcharts.js，還有a canvas emulator for IE和Jquery類庫或者MooTools類庫；
• 提示功能：滑鼠移動到圖表的某一點上有提示資訊；
• 放大功能：選中圖表部分放大，近距離觀察圖表；
• 易用性：無需要特殊的開發技能，只需要設定一下選項就可以製作適合自己的圖表；
• 時間軸：可以精確到毫秒;

不過因為專案原因，所以可能不會再使用這個，只對個人免費，現在的考慮是基於D3做一個新的。

官方示例程式碼

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

我承認我也不想看這些程式碼，但是這樣子似乎使原文的長度變長了。大部分人也省得去查詢了。

所以我們要做的只是用陣列代替data

jQuery Mobile

在首頁上看到的那個效果是jQuery Mobile。。