如何使用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希望它能被修复。