你能show/hide系列在旭日图中吗？

Question

您能否像在 X 范围图表中使用系列一样在旭日图上使用可选系列？在 x 范围图表中，系列可以是 selected/deselected (shown/hidden)。你能在旭日图中做类似的事情吗？以某种方式对数据点进行分组？

x 范围图表中 shown/hidden 系列的示例：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
        }
    }]

});

Answer 1

首先，sunburst图表类型只有一个系列，所以hide/show图表部分需要hide/show点。但是，默认情况下不支持此功能，需要进行一些自定义。

最简单的解决方案是使用 pie 系列类型和内部 legendType: 'point' 选项的 setVisible 方法。接下来，在 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

你能show/hide系列在旭日图中吗？

Can you show/hide series in sunburst diagrams?

highcharts

sunburst-diagram