绘制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();
　　});