隐藏价值低于特定值的类别 [英] Hide categories with value below than specific value Highcharts

问题描述

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

I have a stacked bar chart, I want to hide bar column if value less than specific value. I use yAxis update min value, and bar column did not display.

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

但是我也想在xAxis中隐藏条形列的类别.

But I also want to hide categories in xAxis where bar column is hidden.

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

I want to hide them if no bar column

这是我的源代码

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 Fiddle https://jsfiddle.net/viethien/n5auqt3v/15/

JS Fiddle https://jsfiddle.net/viethien/n5auqt3v/15/

推荐答案

基于您的 yAxis.max 设置，我们可以检查哪些stackTotal高于设置的点是可见的，以及它们分配了哪些类别.

Basic on your yAxis.max settings we can check which points with stackTotal higher than setting are visible and what categories they have assigned.

let ar = []
chart.series.forEach(s => {
    s.points.forEach(p => {
    if (p.stackTotal > chart.yAxis[0].dataMax * 0.3){
        ar.push(p.category)
    }
  })
})

下一步，当我们有一系列可见类别时，我们需要从中获取唯一值.

When we have an array of visible categories as a next step we need to get the unique values from it.

let xAxisCat = [... new Set(ar)];

最后一步，我们可以将新的 xAxis.max 设置为此数组的长度以及该数组的类别.

As a final step, we can set the new xAxis.max as a length of this array and categories to this array.

演示: https://jsfiddle.net/BlackLabel/y92usjvf/

这是一种解决方案，无需更改特定案例的数据.

This is a solution without changing the data for your particular case.

这篇关于隐藏价值低于特定值的类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！