jquery flot charts的highlightSeries插件

Question

我正在寻找由Brian Peiris（http://brian.peiris.name/highlightSeries/）制作的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()); 
     }); 
    }); 

我不确定其他代码放在这里，所以告诉我，如果你需要更多的;图表都工作正常，这只是准备功能的一部分，设置占位符内的所有图表和它们的选项。

此外，还有一些附加到标签的类是无关的;我正在尝试不同的方式来让这些东西起作用。

Answer 1

该插件需要打补丁版本flot才能正常工作（它引入了公开的方法）。 The last patched version适用于旧版本的flot（0.7）。

虽这么说，我不会使用这个插件。如果你只是想突出显示一个关于图例鼠标悬停的系列，那很简单。

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

查看示例here。