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轴上每个点有多少个像素。然后，只需查看您的生产线在该范围内的位置，然后相应地应用您的标签即可。你可能需要在几个地方调整它，但这应该工作得很好。