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 },
            ....
        ];
多组资料序列图