Question

我想将两个区域链接到高图树状图中的图例，以便单击图例可以同时打开/关闭两个区域。

例如，在这个小提琴中，如果我在图例中单击“美国”，我希望它关闭两个覆盖“美国”的区域，并且与“澳大利亚”类似。

提琴here。

$(function() {
var H = Highcharts;

H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
    e.allItems.splice(1, 2);
});

$('#container').highcharts({
    chart: {
        type: 'treemap'
    },
    plotOptions: {
        series: {
            events: {
                legendItemClick: function (event) {
                    alert('Done');
                }
            }
        }
    },

    series: [{

        data: [{
            'name': 'Americas',
            'value': 52976,
            'color': 'rgba(47,126,216,1)'
        }, {
            'name': 'Australia',
            'value': 41219,
            'color': 'rgba(13,35,58,1)'
        }, {
            'name': 'Americas',
            'value': 52976,
            'color': 'rgba(47,126,216,1)'
        }, {
            'name': 'Australia',
            'value': 41219,
            'color': 'rgba(13,35,58,1)'
        }],
        legendType: 'point',
        showInLegend: true
    }]


});

}）;

Answer 1

您可以使用点legendItemClick事件和内部setVisible方法：

    plotOptions: {
        series: {
            point: {
                events: {
                    legendItemClick: function(event) {
                        var points = this.series.points;

                        points.forEach(function(p) {
                            if (this !== p && this.name === p.name) {
                                p.setVisible(!this.visible, true);
                            }
                        }, this);
                    }
                }
            }
        }
    }

实时演示：https://jsfiddle.net/BlackLabel/k4o8q6du/

Highcharts树图链接图例

1 个答案: