Flot Легенда - Интерактивная

Question

Было интересно, если есть плагин уже доступен для FLOT легенды диаграммы, чтобы быть интерактивным, как в Highcharts

Обеспечивая пример здесь

http://jsfiddle.net/yohanrobert/T3Dpf/1/

Однако в поворот события Я попробовал свою руку на событии mouseover через jquery

$(".legendLabel").mouseover(function(){ 
      // Unhighlight all points 
     console.log($(this)) 
     plot.unhighlight(); 

    // The X value to highlight 
    var value = parseInt($(this).context.innerText.replace('Series ',''))-1; 

    // Retrieve the data the plot is currently using 
    var data = plot.getData(); 

    // Iterate over each series and all points 
    for (var s=0; s<data.length; s++) { 
     var series = data[s]; 
     if(s==value){ 
      for (var p=0; p<series.data.length; p++) { 
       plot.highlight(s, p); 
      } 
     } 
    } 
}); 

Может ли кто-нибудь помочь мне достичь интерактивности, как в примере?

Answer 1

Расширенная togglePlot функции для различных типов участков (мы сохранить первоначальный вид участка в hidden собственности):

togglePlot = function (seriesIdx) { 
    var plotTypes = ['lines', 'points', 'bars']; 
    var someData = somePlot.getData(); 
    var series = someData[seriesIdx]; 
    $.each(plotTypes, function (index, plotType) { 
     if (series[plotType]) { 
      if (series[plotType].show) { 
       series[plotType].show = false; 
       series[plotType].hidden = true; 
      } 
      else if (series[plotType].hidden) { 
       series[plotType].show = true; 
       series[plotType].hidden = false; 
      } 
     } 
    }); 
    somePlot.setData(someData); 
    somePlot.draw(); 
} 

Для выделения ряда данных, как в Highcharts добавить highlightPlot функции, как это (здесь только для линии серия):

highlightPlot = function (seriesIdx) { 
    var someData = somePlot.getData(); 
    $.each(someData, function (index, series) { 
     someData[index].lines.lineWidth = (index == seriesIdx ? 4 : 2); 
    }); 
    somePlot.setData(someData); 
    somePlot.draw(); 
} 

Я также изменил обработчик событий рядных для JQuery обработки событий, чтобы сделать его чище:

$(document).on({ 
    click: function() { 
     togglePlot($(this).data('index')); 
     return false; 
    }, 
    mouseover: function() { 
     highlightPlot($(this).data('index')); 
    }, 
    mouseout: function() { 
     highlightPlot(-1); 
    }, 
}, 'a.legend'); 

См. Это обновление fiddle для полного примера.