jqPlot Show Label для пунктирной горизонтальной линии - PullRequest
Новая
       2

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

1 голос
/ 17 февраля 2012

Я хочу поставить метку на горизонтальной линии 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
        }}
      ]
    }           
  });

1 Ответ

2 голосов
/ 15 августа 2012

У меня недавно была такая же проблема, и я нашел решение, которое, кажется, работает довольно хорошо. Прежде всего, вам нужно создать новую функцию, чтобы вы могли передать в сюжет объект «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. Тогда вам просто нужно увидеть, где ваша линия вписывается в диапазон, и соответственно применить вашу метку. Возможно, вам придется настроить его в нескольких местах, но это должно работать очень хорошо.

...