時間資料格式最常與折線圖搭配,可以用來看資料的走向及趨勢,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();
});