如何使用饼图和列链接/共享图例?

时间:2015-05-14 19:45:12

标签: javascript highcharts legend

如果我们采用这个例子:http://www.highcharts.com/demo/combo

如何在饼图和列之间共享图例?当我同时点击列和饼的图例时,我希望能够使用/禁用一个系列!

1 个答案:

答案 0 :(得分:0)

绑定legendItemClick事件,并在饼图中隐藏连接的切片。演示:http://jsfiddle.net/x8ygvwbx/1/

    plotOptions: {
        series: {
            events: {
                legendItemClick: function(e) {
                    var vis = this.visibility,
                        name = this.name,
                        pie = this.chart.get("my-pie"), // set pie's ID
                        index = pie.options.legendNames.indexOf(name); // get index of names

                    pie.points[index].setVisible(vis); //change visibility
                }
            }
        }
    },

饼图选项的示例:

    {
        id: "my-pie",  // ID
        type: 'pie',
        name: 'Total consumption',
        legendNames: ["Jane", "John", "Joe"], //NAMES
        data: [{
            name: 'Jane',
            y: 13,
            color: Highcharts.getOptions().colors[0] // Jane's color
        }, {
            name: 'John',
            y: 23,
            color: Highcharts.getOptions().colors[1] // John's color
        }, {
            name: 'Joe',
            y: 19,
            color: Highcharts.getOptions().colors[2] // Joe's color
        }]
    }