如何画Flot时间数据格式图

时间数据格式最常与折线图搭配,可以用来看数据的走向及趋势,Flot的时间数据格式是以javascript timestamps为单位,也就是毫秒,从"1970-01-01 00:00"算起.在这章我们会介绍如何自定时间数据的输出格式.

黄金价格(时间格式数据)范例

绘图用到的档案

所有需要的档案清单如下.jquery.flot.axislabels.js为轴标签的插件,jquery.flot.time.js为使用时间数据格式的插件.另外为了让IE8以下版本能显示Flot图表,所以需要excanvas.min.js插件.
 
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>      
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->   
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
        

建立数据

在范例里我们绘制了2条折线图,所以我们就建立2个数组变量,并在数组里插入数组格式如[x ,y],分别代表x轴及y轴资料,在x轴我们用了一个自定义函式gd(),是为了要抓取javascript timestamps资料,在这里我们准备了一个月的黄金价格数据,程序代码如下.
 
//sell out
var data1 = [
    [gd(2013, 1, 2), 1690.25], [gd(2013, 1, 3), 1696.3], [gd(2013, 1, 4), 1659.65], [gd(2013, 1, 7), 1668.15], [gd(2013, 1, 8), 1656.1], [gd(2013, 1, 9), 1668.65], [gd(2013, 1, 10), 1668.15], [gd(2013, 1, 11), 1680.2], [gd(2013, 1, 14), 1676.7], [gd(2013, 1, 15), 1680.7], [gd(2013, 1, 16), 1689.75], [gd(2013, 1, 17), 1687.25], [gd(2013, 1, 18), 1698.3], [gd(2013, 1, 21), 1696.8], [gd(2013, 1, 22), 1701.3], [gd(2013, 1, 23), 1700.8], [gd(2013, 1, 24), 1686.75], [gd(2013, 1, 25), 1680], [gd(2013, 1, 28), 1668.65], [gd(2013, 1, 29), 1671.2], [gd(2013, 1, 30), 1675.7], [gd(2013, 1, 31), 1684.25]
];
//buy in
var data2 = [
    [gd(2013, 1, 2), 1674.15], [gd(2013, 1, 3), 1680.15], [gd(2013, 1, 4), 1643.8], [gd(2013, 1, 7), 1652.25], [gd(2013, 1, 8), 1640.3], [gd(2013, 1, 9), 1652.75], [gd(2013, 1, 10), 1652.25], [gd(2013, 1, 11), 1664.2], [gd(2013, 1, 14), 1660.7], [gd(2013, 1, 15), 1664.7], [gd(2013, 1, 16), 1673.65], [gd(2013, 1, 17), 1671.15], [gd(2013, 1, 18), 1682.1], [gd(2013, 1, 21), 1680.65], [gd(2013, 1, 22), 1685.1], [gd(2013, 1, 23), 1684.6], [gd(2013, 1, 24), 1670.65], [gd(2013, 1, 25), 1664], [gd(2013, 1, 28), 1652.75], [gd(2013, 1, 29), 1655.25], [gd(2013, 1, 30), 1659.7], [gd(2013, 1, 31), 1668.2]
];

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}
        
接着我们建立一个叫dataset的数组变量,把上面建立好的数据放到数组里的对象中,设定到data属性里,在这里我们还设定了label属性,这将会用做图例的显示名称,而color属性决定了折线图的颜色,points.fillColor属性则是数据点的填满颜色,另外也要将points.show设定为true,数据点符号才会显示,最后因为我们是画折线图,所以要设定lines.show为true,折线图才会出现.
 
var dataset = [
    {
        label: "Sell out",
        data: data1,
        color: "#FF0000",
        points: { fillColor: "#FF0000", show: true },
        lines: { show: true }
    },
    {
        label: "Buy in",
        data: data2,
        xaxis:2,
        color: "#0062E3",
        points: { fillColor: "#0062E3", show: true },
        lines: { show: true }
    }
];
        

建立图表选项

在这里我们为了让图表看起来美观一点,我们设定了series.shadowSize,这会让折线图绘出阴影,让图表看起来更立体.
 
    series: {
        shadowSize: 5
    }
        
在y轴的选项里,yaxis.color表示y轴刻度卷标的文字颜色,这里设定成黑色的.而yaxis.tickDecimals是用来设定y轴刻度标签的小数点位数,因为黄金价格是有小数的,所以我们设定成显示2位小数,输出看起来就会是像1650.00,而所有axisLabel开头的属性都是属于轴标签的,也就是我们在一开始时加入的jquery.flot.axislabels.js插件的功能.
 
    yaxis: {
        color: "black",
        tickDecimals: 2,
        axisLabel: "Gold Price  in USD/oz",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 5
    }
        
因为x轴的部份是显示时间数据格式的,所以在xaxis.mode里需要设定成"time",这样Flot才会以时间格式编译x轴的刻度标签.另外我们用了xaxis.tickFormatter自行定义刻度标签要输出的格式,在这里我们输出成星期几,若是不用自行定义的方式,你也可以设定timeformat:"%a"让卷标显示星期几.xaxis.position表示刻度标签要出现在那里,我们设定成"top"表示出现在图表的上方.

在x的第二个轴的部份,我们设定了tickformat:"%m/%d",表示刻度标签会输入出:01/05的日期格式,若要输出年含年度的日期可以写成"%Y/%m/%d",输出会变成:2012/01/05,Flot还支持其它的日期格式设定.另外我们还设定了tickSize:[3, "day"],这表示刻度标签会以每3天的间隔显示,如果设定成tickSize:[2, "month"]则表示刻度标签会以每2个月的间隔显示
 
    var dayOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"];

    xaxes: [{
        mode: "time",        
        tickFormatter: function (val, axis) {            
            return dayOfWeek[new Date(val).getDay()];
        },
        color: "black",
        position: "top",        
        axisLabel: "Weekday",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 5
    },
    {
        mode: "time",
        timeformat: "%m/%d",
        tickSize: [3, "day"],
        color: "black",        
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    }]
        

完成绘图

最后我们再呼叫$.plot把上面建立的dataset以及options带入,再呼叫UseTootip()后,整个绘图即完成.
 
    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });
        

练习

本章的完整范例程序代码可以在这里找到并做在线练习 Go to Example Tester