Flot資料格式介紹

上一章已經學會了如何繪製一個基本的折線圖, 這章要提到Flot裡最重要的資料格式, 因為在繪製任何一個圖表前最重要的就是要把資料整理成Flot所需要的格式, 只要資料格式不正確, 繪製出來的圖表就不會正確. 本章所講就是呼叫plot函式所需帶入的data參數

基本資料格式


Flot的資料格式是由多個資料序列組成的陣列, 格式如下 
        [series1, series2, series3, ...]
而每個序列的資料是由x軸和y軸的數值組合而成的 
        [x, y]
綜合上面的說明, Flot資料格式如下 
        var data = [
            [x1, y1], [x2, y2], [x3, y3], [x4, y4]
        ];
以下皆是正確的資料格式 
        var data_integer = [
            [0, 5], [1, 10], [2, 15], [3, 20]
        ];
        var data_float = [
            [1, 5.5], [2.5, -10], [4.5, 15], [6, -20.3]
        ];
        var data_null = [
            [1, 5.5], [2.5, null], [4.5, 15], [6, null]
        ];
此外x與y的值必須皆為數字格式(整數或是浮點數), 不可用字串格式, 即使你是使用時間資料格式, 也必須將時間轉換成javascript timestamps, 也就是自1/1/1970 00:00:00 UTC起計算出的毫秒數. Flot也支援null, 如果某一點資料設定為null, 該資料點就不會被繪出.

呼叫plot函式帶入資料格式如下(label屬性可省略, 但data屬性一定要指定) 
        $.plot(placeholder,[
                {
                    label: "line1", 
                    data: [
                        [0, 5], [1, 10], [2, 15], [3, 20]
                    ]
                }
            ], 
            options);
帶有null值的直條圖

時間資料格式

若你是用時間格式做為資料的話, 必須把時間轉換成javascript timestamps格式, 另外axes裡的mode必須設定為"time", 並且需要加入jquery.flot.time.js外掛程式
以下是程式碼範例, 以x軸為時間格式 
        var rawData = [
            [1325347200000, 60], [1328025600000, 100], [1330531200000, 15], [1333209600000, 50]
        ];

        var options = {
            xaxis: {
                mode: "time"
            }
        }

        $.plot($("#placeholder"),[
                {                    
                    data: rawData
                }
            ], 
            options);
時間格式折線圖

多組資料序列格式

上面所提到的資料格式都是只有單組資料序列的圖表, 但有很多時候我們也需要繪製多組資料序列的圖表, 多組資料序列格式範例如下 
        var rawData_1 = [
            [1325347200000, 60], [1328025600000, 100], [1330531200000, 15], [1333209600000, 50]
        ];

        var rawData_2 = [
            [1325347200000, 5], [1328025600000, 12], [1330531200000, 7], [1333209600000, 25]
        ];

        var dataset = [
            { 
                label: "Sales", 
                data: rawData_1 
            },
            { 
                label: "Profits", 
                data: rawData_2
            }
        ];

        $.plot($("#placeholder"), dataset, options);
需要更多的資料序列就依序加上去 
        var dataset = [
            { series1 },
            { series2 },
            { series3 },
            ....
        ];
多組資料序列圖