您可以在旭日形图中显示/隐藏系列吗？答案

【问题标题】：Can you show/hide series in sunburst diagrams?您可以在旭日形图中显示/隐藏系列吗？
【发布时间】：2018-11-22 11:49:13
【问题描述】：

您能否像在 x 范围图表中使用系列一样，在旭日形图中使用可选系列？在 x 范围图表中，可以选择/取消选择（显示/隐藏）系列。你能在旭日形图中做类似的事情吗？以某种方式对数据点进行分组？

x 范围图表中显示/隐藏系列的示例：http://jsfiddle.net/02Lqotd7/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    },{
        name: 'Project 2',
        // pointPadding: 0,
        // groupPadding: 0,
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

【问题讨论】：

标签： highcharts sunburst-diagram

【解决方案1】：

首先，sunburst 图表类型只有一个系列，因此要隐藏/显示图表的部分，您需要隐藏/显示点。但是，默认情况下不支持此功能，需要进行一些自定义。

最简单的解决方案是使用pie 系列类型中的setVisible 方法和内部legendType: 'point' 选项。接下来，在afterGetAllItems 事件中隐藏不必要的图例项。

var H = Highcharts;

H.seriesTypes.sunburst.prototype.pointClass.prototype.setVisible = H.seriesTypes.pie.prototype.pointClass.prototype.setVisible

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

最后还是要处理点legendItemClick事件——你可以使用点update方法来设置value: null为隐藏点：

    point: {
        events: {
            legendItemClick: function() {
                this.series.points.forEach(function(el) {
                    if (el.color === this.color) {
                        el.update({
                            oldValue: el.value ? el.value : el.oldValue,
                            value: el.value ? null : el.oldValue
                        }, false);
                    }
                }, this);

                this.series.chart.redraw();
            }
        }
    }

现场演示：http://jsfiddle.net/BlackLabel/8cLp17of/

API：https://api.highcharts.com/class-reference/Highcharts.Point#update

【讨论】：