Flot Legend - 互动

Question

想知道FLOT图表图例中是否有一个插件可以像在highcharts中那样具有交互性

在此提供示例

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

然而，在一系列事件中，我通过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。