Скрыть столбцы на панели с накоплением, когда все значения 0

Question

Я хочу, чтобы столбчатая диаграмма с накоплением могла автоматически скрывать любые пустые столбцы, т. Е. Столбцы, в которых все значения складываются до 0.

Например, в этом графике я хотел бы полностьюскрыть апельсины, даже если в коде они все еще будут существовать как категория.

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 для всех столбцов и удалить их из массива JSON.

removeNullValues() Метод проверяет категории со всеми значениями, равными 0, и удаляет их из серии и категорий.

1005 *

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
});

<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>

Answer 2

Во-первых, вам нужно найти, какая категория имеет только 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