Как нарисовать горизонтальную линию на графике с использованием 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 
     }} 
     ] 
    }   
    }); 

Я пытаюсь нарисовать линию, где у = 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 
    }} 
    ] 
}   

Вытащил из вашего примера, это рисует линию ниже макс набора данных.

Вы можете использовать встроенный объект jsDate в jqplot, чтобы преобразовать строку даты в числовое значение. Заменить текущую строку на следующую дату:

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

Это работает так, как вы хотели бы этого.

Если вы не возражаете, напишите отчет об ошибке в https://bitbucket.org/cleonello/jqplot/issues и, надеюсь, он будет исправлен.