Javascript 突出显示flot图表中的线条

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

我使用下面的代码

---

查看flot 0.7的源代码，其中没有突出显示行的功能

然而，如果您想扩展flot来做您想做的事情

Flot有一个“覆盖”画布，它用来做高亮显示等效果。这在源代码中具有关联的上下文

octx

。如果查看方法

drawPointHighlight（series，point）

，可以看到如何对数据点进行突出显示。您可以为行编写类似的方法

drawOverlay（）

函数迭代可高亮显示的对象数组——您可能希望将其扩展为处理“line”对象

最后，您需要编写一个方法来从可高亮显示的对象数组中添加/删除行，类似于现有的

highlight（）

和

unhighlight（）

方法。 请注意，这些方法是使用以下行公开的：

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

---

您是否可以使用两个不同的系列（每个系列具有适当的颜色）来完成您想要的操作，而不是试图突出显示特定的线段（或系列中的一组数据点）

我使用条形图来实现这一点，以便能够在图表的图形上显示一个额外的维度，并且它运行得相当好

---

注意：我一直在使用flot绘制条形图，因此，如果系列线下降到水平轴的值为零时，每次需要更改（或更改回）颜色时，可能都必须使用单独的系列。

最简单的方法是使用“plothover”事件重新渲染图表。Flot渲染速度极快，因此不应出现任何闪烁。我目前正在做一个项目，效果很好

您可以在此处找到有关“plothover”和“plotclick”事件的文档：

flot的一个未记录功能是，您可以向每个series对象添加任意键，这些键将在“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();
});

$（函数（）{
var d1=[]；
对于（var i=0；i<14；i+=0.5）{
d1.推挤（[i，Math.sin（i）]）；
}
变量d2=[[0,3]，[4,8]，[8,5]，[9,13]；
变量d3=[[0,12]，[7,12]，[7,2.5]，[12,2.5]；
风险值数据=[
{键：'d1'，数据：d1}，
{键：'d2'，数据：d2}，
{键：“d3”，数据：d3}
];
功能图（lineKey）{
$.each（数据、函数（索引、行）{
行。行={
线宽：（lineKey==line.key）？3:0.5
}
$.plot（“#占位符”，数据，{grid:{hoverable:true}}）；
});
}
var-previousPoint=null；
$（“#占位符”）。在（'plothover'，函数（e，位置，项）上{
如果（项目）{
如果（previousPoint==null | | | previousPoint[0]！==item.seriesIndex | | | previousPoint[1]！==item.dataIndex）{
previousPoint=[item.seriesIndex，item.dataIndex]；
绘图仪（项目系列键）；
}
}否则{
绘图仪（）；
previousPoint=null；
}
});
绘图仪（）；
});

---

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

我正在寻找相同的东西。。。你们可以使用plothover，自己弄清楚鼠标是否在一条线上，但我想要一个更简单的方法。

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