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); 
} 

あなたは、本質的に、グラフのタイトルとx軸ラベルのテキストを構成する画素の＃を引いた後、あなたのグラフのdiv要素のサイズをつかみました。次に、y軸の各点を構成するピクセルの数を計算できます。次に、範囲内のどこにラインが収まるかを見て、それに応じてラベルを適用するだけです。あなたはいくつかの場所でそれを微調整しなければならないかもしれませんが、これはかなりうまくいくはずです。