jqPlot Показать ярлык для пунктирной горизонтальной линии

Question

Я хочу поместить метку в горизонтальную линию CanvasOverlay и показать ее на графике. Не найдено никакой документации, связанной с этим. Но не удалось. Любой указатель на исправление этой проблемы был бы оценен.

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: new $.jsDate('2012-02-01 05:00:00').getTime(), 
      lineWidth: 3, 
      color: 'rgb(100, 55, 124)', 
      shadow: true, 
      lineCap: 'butt', 
      xOffset: 0 
     }}, 
     {dashedHorizontalLine: { 
      name: 'bam-bam', 
      y: new $.jsDate('2012-02-01 10:00:00').getTime(), 
      lineWidth: 4, 
      dashPattern: [8, 16], 
      lineCap: 'round', 
      xOffset: '25', 
      color: 'rgb(66, 98, 144)', 
      shadow: false 
     }} 
     ] 
    }   
    }); 

Answer 1

У меня недавно была эта же проблема и пришло решение, которое, похоже, работает очень хорошо. Прежде всего, вам нужно создать новую функцию, чтобы вы могли передать объект сюжета «plot2». Затем вы можете получить доступ к различным свойствам ваших осей, чтобы рассчитать, где jqplot выполняет вашу горизонтальную линию.

function applyChartText(plot, text, lineValue) { 
    var maxVal = plot.axes.yaxis.max; 
    var minVal = plot.axes.yaxis.min; 
    var range = maxVal + Math.abs(minVal); // account for negative values 
    var titleHeight = plot.title.getHeight(); 

    if (plot.title.text.indexOf("<br") > -1) { // account for line breaks in the title 
      titleHeight = titleHeight * 0.5; // half it 
    } 

    // you now need to calculate how many pixels make up each point in your y-axis 
    var pixelsPerPoint = (plot._height - titleHeight - plot.axes.xaxis.getHeight())/range; 

    var valueHeight = ((maxVal - lineValue) * pixelsPerPoint) + 10; 

    // insert the label div as a child of the jqPlot parent 
    var title_selector = $(plot.target.selector).children('.jqplot-overlayCanvas-canvas'); 
    $('<div class="jqplot-point-label " style="position:absolute; text-align:right;width:95%;top:' + valueHeight + 'px;">' + text + '</div>').insertAfter(title_selector); 
} 

Вы существенно захватывая размер DIV вашего графа, а затем вычитая вне # пикселей, составляющих титул графа и текст х-меток осей. Затем вы можете рассчитать, сколько пикселей составляет каждую точку на оси y. Тогда это просто вопрос, где ваша линия соответствует диапазону и соответствующим образом применяет ваш ярлык. Возможно, вам придется настроить его в нескольких местах, но это должно работать очень хорошо.