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。