通过单击数据点或复选框删除数据系列

时间:2013-12-27 00:15:29

标签: javascript jquery flot

有人可以告诉我如何将以下2个解决方案合并到1个html页面中。通过复选框或单击数据点来切换数据集,如以下2个链接所示:

1) http://jsfiddle.net/X2q69/1/

$(".chart").bind("plotclick", function (event, pos, item) {
    if (item){
        var label = item.series.label;
        $([plot1, plot2]).each(function(i,plotObj){
            var someData = plotObj.getData();
            for (var i=0; i<someData.length; i++){
                if (someData[i].label == label){
                    someData.splice(i,1);
                }                
            }
            plotObj.setData(someData);
            plotObj.setupGrid();
            plotObj.draw();                
        });
    }        
});

2)     http://jsfiddle.net/larsenmtl/GVt9V/1/

1 个答案:

答案 0 :(得分:1)

这是一个example。我修改了第二个链接,从过滤数据到切换series.lines.show选项。我认为这是一种更清洁的方法。它使用复选框或plotclick处理程序中的以下函数,切换节目并重绘图。

toggleSeries = function(label){
    var someData = somePlot.getData();
    for (var i = 0; i < someData.length; i++){
        if (someData[i].label == label){
            someData[i].lines.show = !someData[i].lines.show;
            break;
        }
    }
    somePlot.setData(someData);
    somePlot.setupGrid();
    somePlot.draw();
}