在 Flot 图表中突出显示线条

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;            
        }
    }
});

- LuckyStrike

---

我正在寻找同样的东西...你可以使用plothover并自己找出鼠标是否在一条线上，但我想要更简单的方法。 - Lasse Skindstad Ebert

Answer 1

查看flot 0.7的源代码，没有包含突出显示线条的功能。

但是，如果您想扩展flot以实现所需功能...

Flot有一个“覆盖”画布，用于执行诸如突出显示之类的效果。在源代码中，它具有相关联的上下文octx。如果您查看方法drawPointHighlight(series, point)，您可以看到如何突出显示数据点。您可以编写类似的方法来处理线条。

drawOverlay()函数遍历可突出显示对象的数组 - 您需要扩展该功能以处理“线”对象。

最后，您需要编写一种方法来添加/删除可突出显示对象的线条，类似于现有的highlight()和unhighlight()方法。请注意，这些方法使用以下行进行公开：

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

- fuzic

Answer 2

最简单的方法就是使用“plothover”事件重新渲染图表。Flot 渲染速度非常快，所以不应该出现任何闪烁。我目前正在一个项目中这样做，效果很好。

您可以在此处找到“plothover”和“plotclick”事件的文档： https://github.com/flot/flot/blob/master/API.md#customizing-the-grid Flot 的一个未记录功能是，您可以向每个系列对象添加任意键，并且这些键将在“plothover”和“plotclick”事件处理程序中可用。在我的示例中，我创建了一个名为“key”的任意键，如果您正在使用标签，则可以使用“label”。

以下是一个示例：

$(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();
});

注意 - 仅在悬停在实际数据点上时才有效。

- Robert Williams

Answer 3

与其试图突出显示特定的线段（或系列中的一组数据点），为什么不使用两个不同的系列（每个系列都有适当的颜色）来实现你想要的效果呢？

我在条形图中这样做，以便能够在图表的图形上显示一个附加维度，效果还不错。

注意：我主要使用flot制作条形图，因此如果您的系列线下降到水平轴上的零值，您可能需要每次想要更改颜色（或更改回来）时使用单独的系列。

- Peter Bernier