javascript - 当系列名称没有归因于它的值时隐藏类别 highchart

Question

出于演示目的，我简化了下面的图表，但我有很多类别，但并非所有系列名称都具有这些类别的值。因此，当我选择该系列名称时，我将如何使 0 值类别消失。

例如，当选择人员 1 时，服务 1 类别应该消失，而不是保持没有栏条

Highcharts.chart('container', {
chart : {type: 'column'},

xAxis: {
    categories: ["service1", "service2", "service3", "service"] ,
    showEmpty : true ,
    ordinal: false
    },

series: [{
    name: 'person1',
    data: [0,2,3],

    },
{   name : 'person2',
        data: [10,6,5]
}]
});

代码链接 https://jsfiddle.net/uroepk1j/

来自 JSFiddle 的 ppotaczek 代码

Highcharts.chart('container', {
chart: {
    type: 'column',
    ignoreHiddenSeries: true
},
plotOptions: {
    column: {

        pointPlacement: null,
        events: {
            legendItemClick: function() {
                var points = this.data,
                    hideCategory = false,
                    breaks = [],
                    stop,
                    series = this.chart.series;

                this.chart.xAxis[0].update({
                    breaks: []
                });

                this.visible = !this.visible;

                points.forEach(function(p, i) {
                    stop = false;

                    series.forEach(function(s) {

                        if (!stop && (!s.visible || s.data[i].y === 0)) {
                            hideCategory = true;
                        } else {
                            stop = true;
                            hideCategory = false;
                        }
                    }, this);

                    if (hideCategory) {
                        breaks.push({
                            from: i - 0.5,
                            to: i + 0.5,
                            breakSize: 0
                        })
                    }

                    hideCategory = false;
                }, this);

                this.visible = !this.visible;

                this.chart.xAxis[0].update({
                    breaks: breaks
                });
            }
        }
    },
},
xAxis: {
    categories: ['Col 1', 'Col 2', 'Col 3']
},
series: [{
        name: 'person1',
        data: [2, 0, 3],

    },
    {
        name: 'person2',
        data: [10, 1, 5]
    }
]
});

谢谢你的帮助

Answer 1

您可以使用 broken-axis 模块并在没有点的类别中插入中断，例如:

plotOptions: {
    column: {
        grouping: false,
        pointPlacement: null,
        events: {
            legendItemClick: function() {
                if (!this.visible) {
                    breaks[this.index] = {}
                    this.chart.xAxis[0].update({
                        breaks: breaks
                    });
                } else {
                    breaks[this.index] = {
                        from: this.xData[0] - 0.5,
                        to: this.xData[0] + 0.5,
                        breakSize: 0
                    }
                    this.chart.xAxis[0].update({
                        breaks: breaks
                    });
                }
            }
        }
    },
}

---

现场演示: http://jsfiddle.net/BlackLabel/4utq7e3n/

API 引用: https://api.highcharts.com/highcharts/xAxis.breaks