用户点击图例时从图表中删除系列文件?

时间:2015-10-20 09:05:56

标签: javascript jquery highcharts

你应该知道我是Highcharts的新手,所以如果我的代码或问题看起来很奇怪,请告诉我。

用户可以将数据系列添加到图表中。

当用户点击数据系列的图例时,该数据系列将从图表中隐藏,并且图例变为灰色。我想更改此行为,以便当用户单击数据系列的图例时,应该从图表中完全删除该数据系列,而不仅仅是隐藏。

我尝试在highcharts-graph.js中编写以下代码:

plotOptions: {
                line: {

                    events: {
                        legendItemClick: function () {
                            this.remove(true);
                        }
                    }
                }
            }

此代码删除图例。但是,当用户向图表添加另一个数据系列时,将重新显示已停用数据系列的图例。所以我认为我需要修改代码来删除数据系列而不是图例。

1 个答案:

答案 0 :(得分:3)

为避免抛出错误,legendItemClick函数可能会返回false。要避免系列的相同名称或混合索引,可以为新系列设置名称和索引。

JSFiddle:http://jsfiddle.net/jct0msdt/

$(function () {
    $('#container').highcharts({
        plotOptions: {
            line: {
                events: {
                    legendItemClick: function () {
                        this.remove(true);
                        return false;
                    }
                }
            }
        },
        series: [{
            data: [1, 2, 3, 4, 5, 6, 7]
        }, {
            data: [3, 4, 5, 6, 7]
        }, {
            data: [2, 3, 4, 5, 6, 7]
        }, {
            data: [4, 5, 6, 7, 8, 9]
        }]
    });

    var i = 5,
        chart = $('#container').highcharts();
    $('#button').click(function () {
        chart.addSeries({
            data: [i, i + 2, i + 4],
            index: i,
            name: 'Series ' + i
        });
        i++;
    });
});