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

要像在高图中那样突出显示数据系列，请添加这样的 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。

Flot Legend - 互动

Flot Legend - Interactive

flot