時間資料格式最常與折線圖搭配,可以用來看資料的走向及趨勢,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(); }
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 }
yaxis: { color: "black", tickDecimals: 2, axisLabel: "Gold Price in USD/oz", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 5 }
在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(); });