如何在jQuery中繪製y軸的日期時間Flot圖表

Question

我有一天中的時間數據繪製在y軸上。 所以數據集看起來像

x,y 
ex. 
2015-10-01,09:05, 
2015-10-02,09:15, 
2015-10-03,09:20, 
... 

需要使一天中的時間爲y軸。 如何在jquery flot中繪製這個圖？

Answer 1

首先，您必須將數據轉換爲flot可理解的格式。爲此，請將您的日期轉換爲時間戳和您的一天中的時間（如09:15 - > 9.25小時）。然後以時間模式的圖表顯示這些數據。轉換的代碼看起來是這樣的：

var originalData = [ 
    ['2015-10-01', '09:05'], 
    ['2015-10-02', '19:15'], 
    ['2015-10-03', '09:20'] 
]; 

var data = []; 

for (var i = 0; i < originalData.length; i++) { 
    var dataPoint = []; 
    dataPoint.push((new Date(originalData[i][0])).getTime()); 

    var time = originalData[i][1].split(':'); 
    var hours = parseInt(time[0], 10); 
    var minutes = parseInt(time[1], 10); 

    dataPoint.push(hours + minutes/60); 
    data.push(dataPoint); 
} 

data現在看起來是這樣的：

data = [ 
    [1443657600000, 9.08333333], 
    [1443744000000, 19.25], 
    [1443830400000, 9.33333333] 
]; 

一個完整的例子來看看這個fiddle。