Question

是否可以使用flot突出显示折线图？我只看到数据点的突出显示，而不是点之间的线。

我使用以下example中的代码。

$("#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

您可以使用两个不同的系列（每个系列都有适当的颜色）来实现您想要的效果，而不是尝试突出显示特定的线段（或系列中的数据点组）吗？

我使用条形图执行此操作，以便能够在图表的图表上显示其他维度，并且它运作得相当好。

注意：我主要使用flot作为条形图，所以如果你的系列线下降到水平轴以获得零值，那么每次你想要颜色改变时你可能不得不使用一个单独的系列（或改回来。）

Answer 3

最简单的方法是使用'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();
});

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

在flot图表中突出显示行

3 个答案: