当所有值均为0时，隐藏堆积栏上的列

Question

我希望堆叠的条形图能够自动隐藏任何空列，即所有值总计为0的列。

例如，在此图表中，我想完全隐藏Orange，即使在代码中它仍作为类别存在。

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'John',
        data: [5, 0, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 0, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 0, 4, 2, 5]
    }]
});

https://jsfiddle.net/jbaptie/dpLa4r8w/

Answer 1

首先，您需要找到仅具有0值的类别，例如，通过这种方式：

var series = [{
        name: 'John',
        data: [5, 0, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 0, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 0, 4, 2, 5]
    }],
    i = 1;

series[0].data.forEach(function(el, j) {
    if (!el) {
        for (; i < series.length; i++) {
            if (series[i].data[j]) {
                i = series.length;
            } else if (i === series.length - 1) {
                ... // only 0 values
            }
        }
    }
});

然后，您可以使用broken-axis模块并根据您的数据创建breaks数组：

        } else if (i === series.length - 1) {
            breaks.push({
                from: j - 0.5,
                to: j + 0.5
            });
        }

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

API参考：https://api.highcharts.com/highcharts/xAxis.breaks

Answer 2

您可以在将数据加载到图表上之前准备类别和系列，在这里可以检查所有列的值为0的系列元素，并将其从JSON数组中删除。

var category = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']; var seriesData = [{ name: 'John', data: [5, 0, 4, 0, 2] }, { name: 'Jane', data: [2, 0, 3, 0, 1] }, { name: 'Joe', data: [3, 0, 4, 0, 5] }]; function removeNullValues(){ var seriesSize = this.seriesData.length; var dataSize = this.seriesData[0].data.length; for(var j=dataSize-1;j>=0;j--){ var flag = 0; for(var i=seriesSize-1;i>=0;i--){ if(this.seriesData[i].data[j]!=0){ flag=1; break; } } if(flag==0){ category.splice(j, 1); for(var i=seriesSize-1;i>=0;i--){ this.seriesData[i].data.splice(j,1); } } } } removeNullValues(); Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Stacked bar chart' }, xAxis: { categories: this.category }, yAxis: { min: 0, title: { text: 'Total fruit consumption' } }, legend: { reversed: true }, plotOptions: { series: { stacking: 'normal' } }, series: this.seriesData });方法正在检查所有值为0的类别，并将其从系列和类别中删除。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

var scrollbar = e.chart.scrollbarChart;
scrollbar.removeListener(scrollbar.chartScrollbar, "zoomed", e.chart.handleScrollbarZoom);