如何在flot線圖中的x軸上顯示時間？

Question

我想顯示一定時間範圍內的最小值和最大值之間的時間間隔。例如：關於x軸

我將讀取從數據庫中的所有的值（已日期時間存儲在2015-04-30 10:27:58格式並使其通過的webmethod

如果我創建2015-04-30 10:20:00和2015-04-30 10:30:00var data1作爲

var data1 = [ 
    ['2015-04-30 10:27:58', 1690.25], ... 
]; 

它不會工作所以我猜我需要在創建var data1時轉換'2015-04-30 10:27:58'毫秒的刻度

但是我不wa nt以正確的時間格式顯示時間，例如10:27:58，而不是在x軸上的1430369878000。 （我想排除日期部分）。

我該如何做到這一點？

//RED 
     var data1 = [ 
    [1430369878000, 1690.25], [1430369879000, 1696.3], [1430369880000, 1659.65] 
]; 

     //BLUE 
     var data2 = [ 
    [1430369878000, 1682.1], [1430369879000, 1680.65], [1430369880000, 1685.1] 
]; 

    var dataset = [ 
{ 
    label: "Sell out", 
    data: data1, 
    color: "#FF0000", 
    points: { fillColor: "#FF0000", show: true }, 
    lines: { show: true } 
}, 
{ 
    label: "Buy in", 
    data: data2, 
    color: "#0062E3", 
    points: { fillColor: "#0062E3", show: true }, 
    lines: { show: true } 
} 
]; 


    var options = { 
     series: { 
      shadowSize: 5 
     }, 
     xaxes: { mode: "time", 
      min: parseInt((new Date("2015-04-30 10:27:58")).getTime()), 
      max: parseInt((new Date("2015-04-30 10:43:39")).getTime()), 
      timeformat: "%H/%M/%S" 
     }, 
     yaxis: { 
      color: "black", 
      tickDecimals: 2, 
      axisLabel: "Gold Price in USD/oz", 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial', 
      axisLabelPadding: 6 
     }, 
     legend: { 
      noColumns: 0, 
      labelFormatter: function (label, series) { 
       return "<font color=\"white\">" + label + "</font>"; 
      }, 
      backgroundColor: "#000", 
      backgroundOpacity: 0.9, 
      labelBoxBorderColor: "#000000", 
      position: "nw" 
     }, 
     grid: { 
      hoverable: true, 
      borderWidth: 3, 
      mouseActiveRadius: 50, 
      backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }, 
      axisMargin: 20 
     } 
    }; 

    $(document).ready(function() { 

     setInterval(function() { 
      $.plot($("#flot-placeholder"), dataset, options); 
      $("#flot-placeholder").UseTooltip(); 
     }, 1000) 
    }); 


    var previousPoint = null, previousLabel = null; 

    $.fn.UseTooltip = function() { 
     $(this).bind("plothover", function (event, pos, item) { 
      if (item) { 
       if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) { 
        previousPoint = item.dataIndex; 
        previousLabel = item.series.label; 
        $("#tooltip").remove(); 

        var x = item.datapoint[0]; 
        var y = item.datapoint[1]; 

        var date = new Date(x); 
        var color = item.series.color; 

        showTooltip(item.pageX, item.pageY, color, 
         "<strong>" + item.series.label + "</strong><br>" + 
         x + 
         " : <strong>" + y + "</strong> (USD/oz)"); 
       } 
      } else { 
       $("#tooltip").remove(); 
       previousPoint = null; 
      } 
     }); 
    }; 

    function showTooltip(x, y, color, contents) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y, 
      left: x, 
      border: '2px solid ' + color, 
      padding: '3px', 
      'font-size': '9px', 
      'border-radius': '5px', 
      'background-color': '#fff', 
      'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
      opacity: 0.9 
     }).appendTo("body").fadeIn(200); 
    } 

Answer 1

對於x軸的選項是不xaxis因此它們不使用的名稱xaxes下。 （另外的最小值和最大值是外部數據範圍的。）

// not xaxes: 
    xaxis: { 
     mode: "time", 
     //min: parseInt((new Date("2015-04-30 10:27:58")).getTime()), 
     //max: parseInt((new Date("2015-04-30 10:43:39")).getTime()), 
     timeformat: "%H/%M/%S" 
    }, 

用於工作實施例，請參閱本fiddle。

PS：您可以使用$.plot()功能，setInterval這沒關係，但您只應該撥打UseTooltip()一次。