Javascript 用于jquery flot图表的highlightSeries插件

我正在寻找Brian Peiris制作的highlightSeries插件的帮助。它似乎不起作用；我确信事件正在触发，因为我之前执行的警报测试工作正常，打印出$this.text。我试图在用户将鼠标移到图例中的系列名称上时突出显示图表上的系列，这在Peiris先生的网站上非常有效

   $('.server-chart').each(function() {
        var serv = $(this).attr('id').substr(6);
        var plotData = [];
        //alert(serv + ": " + $.toJSON(serverStats[serv]));
        for (var k in serverStats[serv].StatsByCollection) {
            var outlabel = k;
            var outdata = serverStats[serv].StatsByCollection[k];
            plotData.push({ label: outlabel, data: outdata});
        }
        plotOptions = {
            legend: {
                container: $('#legend-' + serv),
                labelFormatter: function(label, series) {
                    return '<a href="#' + label + '" class="checked label-clickable">' + label + '</a>';
                },
                noColumns: 2
            },
            series: {
                lines: {
                    show: true,
                    fill: false
                },
                points: {
                    show: false,
                    fill: false
                }
            },
            colors: colors,
            grid: {
                hoverable: false
            },
            highlightSeries: {
                color: "#FF00FF"
    }
        }
        $_plot = $.plot(this, plotData, plotOptions);
        $plots.push($_plot);
        $('#legend-' + serv + ' .legendLabel, #legend-' + serv + ' .legendColorBox').on('mouseenter', function () {
            $_plot.highlightSeries($(this).text());
        });
        $('#legend-' + serv + ' .legendLabel, #legend-' + serv + ' .legendColorBox').on('mouseleave', function () {
            $_plot.unHighlightSeries($(this).text());
        });
    });

我不知道在这里还需要什么代码，所以如果需要更多，请告诉我；图表都运行良好，这只是ready函数的一部分，用于在占位符中设置所有绘图及其选项

---

此外，标签上附加了几个无关的类；我尝试了不同的方法来实现这个功能。

这个插件需要一个补丁版本的flot才能工作。它引入了一个公共drawSeries方法。适用于较旧版本的flot 0.7

话虽如此，我不会使用这个插件。如果你只想在legend鼠标上突出显示一个系列，它非常简单

$('#legend .legendLabel, #legend .legendColorBox').on('mouseenter', function() {
    var label = $(this).text();
    var allSeries = $_plot.getData();
    // find your series by label
    for (var i = 0; i < allSeries.length; i++){
      if (allSeries[i].label == label){
        allSeries[i].oldColor = allSeries[i].color;
        allSeries[i].color = 'black'; // highlight it in some color
        break;
      }
    }
    $_plot.draw(); // draw it
  });

  $('#legend .legendLabel, #legend .legendColorBox').on('mouseleave', function() {
    var label = $(this).text();
    var allSeries = $_plot.getData();
    for (var i = 0; i < allSeries.length; i++){
      if (allSeries[i].label == label){
        allSeries[i].color = allSeries[i].oldColor;
        break;
      }
    }
    $_plot.draw();
  });

---

参见示例。

我实际上已经弄明白了，这是由于涉及$\u plot变量的一个奇怪问题；基本上，没有选择正确的绘图对象。我有一个在页面上创建的所有绘图的数组，所以我只是在绘图生成时添加了一个serverName属性，并将server names serv变量与绘图匹配，从而解决了问题。谢谢你的实施，我会接受你的回答。