隐藏值低于特定值高图的类别

Question

我有一个堆积的条形图，如果值小于特定值，我想隐藏条形柱。我使用yAxis更新最小值，并且柱状栏未显示。

var dataMax = chart.yAxis[0].dataMax;
chart.yAxis[0].update({
                min: dataMax * 0.3
              });

但是我也想在xAxis中隐藏栏列的类别。

如果没有栏，我想隐藏它们

这是我的源代码

var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
				textOutline: false,
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    legend: {
        align: 'center',
        x: 0,
        verticalAlign: 'bottom',
        y: 5,
        
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 0,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            },
             pointPadding: 0.05,
        maxpointWidth: 35,
        //groupPadding:0.1,
        borderWidth: 0
        },
         series: {
          maxpointWidth: 35,
        groupPadding: 0.36,
      //stacking: 'normal',
      dataLabels: {
        formatter: function() {
          if(this.y === this.point.stackTotal || this.y == 0) {
            return ''
          }
          return this.series.name;
        },
        enabled: true,
        //allowOverlap: true,
        //align: 'right',
        color: '#444',
		textOutline: false,
        shadow: false,
        //x:-50,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      //pointPadding: 0.1,
      pointWidth: 50,
      groupPadding: 0.2,
      stacking: 'normal',
      //colorByPoint: true,
      //showInLegend: false
    }
    },
    series: [{"name":"(Component)","data":[2039521123,0,0,4046613348,0,544280301,3865715691,0],"display":2,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Substrate)","data":[1848232605,1109333700,0,0,1478070275,0,0,0],"display":2,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Module)","data":[0,532822345,452625462,0,0,207607714,0,103089669],"display":2,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Support)","data":[0,0,0,0,0,537829903,0,0],"display":1,"stack":"Forecast","showInLegend":false,"pointPadding":0,"pointPlacement":0},{"name":"(Component)","data":[11118985500,0,4732915644,14216361483,0,3423432732,3216931478,0],"display":1,"stack":"Real","showInLegend":false},{"name":"(Substrate)","data":[8495153800,3191092821,0,0,13153490000,0,0,0],"display":3,"stack":"Real","showInLegend":false},{"name":"(Module)","data":[0,13925175787,9837488553,0,0,3705001758,0,338212038],"display":1,"stack":"Real","showInLegend":false},{"name":"(Support)","data":[0,0,0,0,0,4845038686,0,0],"display":1,"stack":"Real","showInLegend":false},{"name":"Forecast","color":"#fe7c7c","events":{}},{"name":"Real","color":"#43d487","events":{}}]
});


var dataMax = chart.yAxis[0].dataMax;
chart.yAxis[0].update({                min: dataMax * 0.3              });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

JS小提琴https://jsfiddle.net/viethien/n5auqt3v/15/

Answer 1

使您的xAxis.categories动态，并取决于数据收集的length

Pseudo：

1. 获取数据每一行的最大列长度。
2. 将该长度设置为您的xAxis.categories，以便仅与您提供的数据匹配。