如何使用JQPlot在图上绘制水平线其中Y轴在时间范围内

Question

我想绘制一个图形，其中x轴是日期，y轴是时间（以小时为单位）。

这是

var line3 = [['02/01/2012 00:00:00', '02/01/2012 01:00:00'], ['02/02/2012 00:00:00', '02/01/2012 06:00:00'], ['02/03/2012 00:00:00', '02/01/2012 06:00:00'], ['02/04/2012 00:00:00', '02/01/2012 06:00:00']]; 
    var plot2 = $.jqplot('chart1', [line3], { 
    title:'Mouse Cursor Tracking', 
    axes:{ 
     xaxis:{ 
      min:'2012-02-01', 
     max:'2012-02-10', 
     Label: 'Day', 
     renderer:$.jqplot.DateAxisRenderer, 
      tickOptions:{ 
      formatString:'%b %#d' 
      }, 
      tickInterval:'1 day' 
     }, 
     yaxis:{ 
    min:'2012-02-01 00:00:00', 
    max:'2012-02-01 24:00:00', 
    Label: 'Time', 
     renderer:$.jqplot.DateAxisRenderer, 
     tickOptions:{ 
      formatString:'%H' 
     }, 
     tickInterval:'2 hour' 
     } 
    }, 
    highlighter: { 
     show: false 
    }, 
    cursor: { 
     show: true, 
     tooltipLocation:'sw' 
    }, 
    canvasOverlay: { 
     show: true, 
     objects: [ 
     {horizontalLine: { 
      name: 'pebbles', 
      y: '2012-02-01 05:00:00', 
      lineWidth: 3, 
      color: 'rgb(100, 55, 124)', 
      shadow: true, 
      lineCap: 'butt', 
      xOffset: 0 
     }} 
     ] 
    }   
    }); 

我想画一条线，其中y = 05:00小时的代码。这不起作用。

你以前遇到过这个问题吗？任何形式的输入都会很棒。

Answer 1

这似乎是jqplot将y坐标映射到像素坐标的方式中的一个错误。它期望与日期（不是字符串）相同单位的数值，它不会转换您传入的值，而是转换为NaN。试试这个有趣的例子：

canvasOverlay: { 
    show: true, 
    objects: [ 
    {horizontalLine: { 
     name: 'pebbles', 
     y: 1328158800000 - 30000000, 
     lineWidth: 3, 
     color: 'rgb(100, 55, 124)', 
     shadow: true, 
     show: true, 
     lineCap: 'butt', 
     xOffset: 0 
    }} 
    ] 
}   

从你的榜样拉高，这吸引你的数据集的最大下面一条线。

您可以使用jqplot中内置的jsDate对象将日期字符串转换为数值。将当前行替换为日期，如下所示：

y: new $.jsDate('2012-02-01 05:00:00').getTime(), 

这可以像您希望的那样工作。

如果您不介意，请提供https://bitbucket.org/cleonello/jqplot/issues的错误报告，并希望它会被修复。