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&nbsp;%#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提交错误报告，希望它会被修复。

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

1 个答案: