jqPlot，xaxis上的日期和yaxis上的時間

Question

我試圖用jqPlot繪製某人完成某件事所需的時間量。在x軸上，我的日期顯示正確。但是，在yaxis上，我想顯示小時，分鐘，秒。無論我嘗試什麼，它都無法正確顯示。

下面的屏幕截圖顯示yaxis上的刻度線映射。

這裏的CoffeeScript的...

$.jqplot(
     "elemid" 
     [["2013-02-01 01:30:28 AM", 97640000],["2013-02-01 01:31:38 AM", 166270000]] 
     axes: 
      xaxis: 
       min: data.XAxisMin 
       max: data.XAxisMax 
       tickInterval: "1 month" 
       tickOptions: 
        formatString: "%b %#d" 
       renderer: $.jqplot.DateAxisRenderer 
      yaxis: 
       min: 0 
       #tickOptions: 
        #formatString: "%#Mm" 
       tickRenderer: $.jqplot.canvasAxisTickRenderer 
       #renderer: $.jqplot.DateAxisRenderer 
     highlighter: 
      show: true 
      sizeAdjust: 7.5 
     series: 
      lineWidth: 4 
      label: series.Label 
      markerOptions: 
       style: "square" 
    ) 

這裏的CoffeeScript的轉換爲JavaScript ...

$.jqplot("elemid", [["2013-02-01 01:30:28 AM", 97640000], ["2013-02-01 01:31:38 AM", 166270000]], { 
    axes: { 
    xaxis: { 
     min: data.XAxisMin, 
     max: data.XAxisMax, 
     tickInterval: "1 month", 
     tickOptions: { 
     formatString: "%b %#d" 
     }, 
     renderer: $.jqplot.DateAxisRenderer 
    }, 
    yaxis: { 
     min: 0, 
     tickRenderer: $.jqplot.canvasAxisTickRenderer 
    } 
    }, 
    highlighter: { 
    show: true, 
    sizeAdjust: 7.5 
    }, 
    series: { 
    lineWidth: 4, 
    label: series.Label, 
    markerOptions: { 
     style: "square" 
    } 
    } 
}); 

我已經創建了一個的jsfiddle但是，我似乎無法讓它運行。我從來沒有使用過的jsfiddle之前，所以我敢肯定，我做錯了什麼......

http://jsfiddle.net/uM8yu/5/

我已經試過DateAxisRenderer在Y軸，但是，時間是不是一個真正的日期/時間本來只需要幾小時，幾分鐘，幾秒鐘就可以完成。

任何幫助將是偉大的！

Answer 1

當你配置你的yaxis，你還需要指定tickOptions：

tickOptions: { 
    formatter: function(format, value){ 
     return MillisecondsToDuration(value); 
    } 
} 

這將完成爲執行MillisecondsToDuration方法（改編自Calculate timespan in JavaScript）每個蜱渲染的時候。

function MillisecondsToDuration(n) { 
    var dtm = new Date(); 
    dtm.setTime(n); 

    var hours = Math.floor(n/3600000); 
    var minutes = dtm.getMinutes(); 
    var seconds = dtm.getSeconds(); 

    return $.jqplot.sprintf('%02d:%02d:%02d', hours, minutes, seconds);   
} 

上述方法假定您的時間值以毫秒爲單位 - 如果不是，則需要進行調整。 %02d表示每個值將被格式化爲最多2個前導零。