Выделить линию на графике

Question

Можно ли выделить линейный график с помощью flot?Я вижу только выделение точек данных, но не линии между точками.

Я использую код из следующего примера .

$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

Глядя на источник для flot 0.7, там нет функции для выделения линий.

Однако, если вы хотите расширить flot, чтобы делать то, что вы хотите ...

Flot имеет «оверлейный» холст, который он использует для создания эффектов, таких как выделение. Это связано с контекстом octx в источнике. Если вы посмотрите на метод drawPointHighlight(series, point), вы увидите, как выполняется выделение для точек данных. Вы можете написать аналогичный метод для строк.

Функция drawOverlay() выполняет итерацию по массиву подсвечиваемых объектов - вы хотели бы расширить это, чтобы обрабатывать также и «линейные» объекты.

Наконец, вам нужно написать метод для добавления / удаления строк из массива подсвечиваемых объектов, аналогичный существующим методам highlight() и unhighlight(). Обратите внимание, что эти методы обнародованы с использованием строк:

plot.highlight = highlight;
plot.unhighlight = unhighlight;

Answer 2

Самое простое, что нужно сделать, это просто использовать событие plothover для повторного рендеринга диаграммы.Флот очень быстро рендерится, поэтому мерцания быть не должно.Я делаю это в проекте в настоящее время, и он прекрасно работает.

Документацию по событиям plothover и plotclick можно найти здесь: https://github.com/flot/flot/blob/master/API.md#customizing-the-grid

Недокументированная особенность flot заключается в том, что вы можете добавлять произвольные ключи к каждому объекту серии, а такжеключи будут доступны в обработчиках событий plothover и plotclick.В моем примере я сделал произвольный ключ с именем «ключ», вы можете использовать «ярлык», если вы используете ярлыки.

Вот пример:

$(function() {

  var d1 = [];
  for (var i = 0; i < 14; i += 0.5) {
    d1.push([i, Math.sin(i)]);
  }
  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]];

 var data = [
   {key: 'd1', data: d1},
   {key: 'd2', data: d2},
   {key: 'd3', data: d3}
   ];

  function plotChart(lineKey) {
      $.each(data, function(index, line){
        line.lines = {
          lineWidth: (lineKey === line.key) ? 3 : 0.5
        }
        $.plot("#placeholder", data, {grid : {hoverable: true}});
    });
  }

  var previousPoint = null;
  $('#placeholder').on('plothover', function(e, position, item){
    if (item) {
      if (previousPoint == null || previousPoint[0] !== item.seriesIndex || previousPoint[1] !== item.dataIndex) {
        previousPoint = [item.seriesIndex, item.dataIndex];
        plotChart(item.series.key);
      }
    } else {
      plotChart();
      previousPoint = null;            
    }
  });

  plotChart();
});

note - это работает только при наведении курсора на фактическую точку данных.

Answer 3

Вместо того, чтобы пытаться выделить определенный отрезок (или группу точек данных в серии), вы могли бы использовать две разные серии (каждая с соответствующим цветом), чтобы делать то, что вы хотите?

Я делаю это с помощью гистограмм, чтобы иметь возможность показать дополнительное измерение на графике диаграммы, и оно работает достаточно хорошо.

ПРИМЕЧАНИЕ. В основном я использовал flot для гистограмм, поэтому, если ваша линия серии опускается до горизонтальной оси для нулевого значения, вам, возможно, придется использовать отдельный ряд каждый раз, когда вы хотите, чтобы цвет изменился ( или вернитесь назад).