javascript - Highcharts - 隐藏堆叠列的类别，可见总数为 0

Question

我有一个堆积柱形图，其中 4 个系列构成 X 轴上的每一列。单击图例以隐藏系列时，许多列可能会总计为 0。

我不知道如何隐藏这些列。

显示所有系列 图表的屏幕截图

隐藏的主要系列 隐藏 的最大系列导致 0

如您所见，X 轴没有调整大小以仅显示总计非 0 的列。我尝试了其他人提到的各种事情。

我正在使用的代码是：

Highcharts.chart(containerName, {
chart: {

     marginTop : 100,
    marginBottom : 130,
    //marginleft : 30,
    //marginright : 30,
    spacingTop: 10,
    borderColor: '#335cad',
    borderWidth: 4,
    type: 'column',
    style: {
        fontFamily: 'Arial',
        fontWeight : 'normal',
    }
},
title: {
    text: title
},
xAxis: {
    categories: nkeys,
    title: {
                text: xtitle,
                fonts : 'Arial',
                fontSize : '20px'
               
            },
            style: {
        fontFamily: 'Arial',
        fontWeight : 'normal',
    },
    labels: {
        rotation: 300
    }
     
},
yAxis: {
    style: {
        fontFamily: 'Arial',
        fontWeight : 'normal',
        strokewidth:'0px',
    },
    textShadow: false,
    min: 0,
    title: {
        text: 'Count'
    },
    stackLabels: {
        enabled: true,
        strokewidth:'0px',
        style: {
            //fontWeight: 'normal',
            fontFamily : 'Arial',
            textoutline : '0px contrast',
            
            color: ( // theme
                Highcharts.defaultOptions.title.style &&
                Highcharts.defaultOptions.title.style.color
            ) || 'gray'
        }
    }
},
legend: {
    align: 'right',
    x: -333,
    verticalAlign: 'top',
    y: 30,
    floating: true,
    backgroundColor:
        Highcharts.defaultOptions.legend.backgroundColor || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false,
    itemStyle: {
        fontWeight: 'normal',
        fontFamily: 'arial'
    }
},
tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
// Formatting of the Chart
plotOptions: {
    column: {
        
        stacking: 'normal',
        strokewidth:'0px',
        dataLabels: {
            formatter: function () {
            return this.y > 0 ? '<p style="font-family:Arial;stroke-width:0px">' + this.y + '</p>' : null;
        },
            textshadow : false,
            enabled: true,
            strokewidth:'0px',
            style: {
        fontFamily: 'Arial',
        fontWeight : 'normal',
        textshadow : false,
        strokewidth:'0px',
        textoutline : false 
    }
          
        }
    }
}, //Data to be displayed 
series: [{
    name: 'WO Complete',
    data: anwnValue,
    color : '#fc8eac',
    legendIndex : 1,
    strokeWidth : "0px",
    borderColor : '#000000',

    style: {
        fontFamily: 'Arial',
        strokewidth:'0px',
        borderWidth :'0px',
        fontWeight : 'normal'
    }

},{
    name: 'Needs Work',
    data: nwvalue,
    color : '#FF0000',
    legendIndex : 0,
    borderColor : '#000000',
}, {
    name: 'Abnormal',
    data: anvalue,
    color : '#FFBF00',
    legendIndex : -1,
    borderColor : '#000000',
}, {
    name: 'Normal',
    data: nvalue,
    color : '#32CD32',
    legendIndex : -2,
    borderColor : '#000000',
}]

});

标签： javascriptsortinghighchartshidestacked-chart