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

我最近有同樣的問題，並提出了一個似乎工作得很好的解決方案。首先，你需要創建一個新的函數，以便你可以傳遞plot對象「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的大小，然後減去構成圖形的標題和x軸標籤的文字像素的＃。然後你可以計算你的y軸上每個點有多少個像素。然後，只需查看您的生產線在該範圍內的位置，然後相應地應用您的標籤即可。你可能需要在幾個地方調整它，但這應該工作得很好。