Question

我想在CanvasOverlay Horizontal行中添加一个标签，并在图表中显示。没有找到任何与之相关的文档。但没有成功。任何指针来解决这个问题将不胜感激。

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&nbsp;%#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的大小，然后减去构成图形标题的像素数和x轴标签的文本。然后，您可以计算y轴中每个点的构成像素数。然后，只需看看您的线在该范围内的位置并相应地应用您的标签即可。您可能需要在几个地方调整它，但这应该可以很好地工作。

jqPlot显示虚线水平线的标签

1 个答案: