Question

我正在尝试绘制一个可以过滤类别的图表，并且它运行得非常好，我使用this来完成它。

问题是：我的最后一个类别是其他类别的总数，因此更高。我希望当“总计”复选框取消选中时，图表会调整大小，但只有在我取消选中“class7”复选框时才会调整大小。

var chart=null;
$(function() {
  var chart = new Highcharts.Chart('container', {
    chart: {
      type: 'column',
      shadow: true
    },
    title: {
      text: 'My Title'
    },
    xAxis: {
      categories: [{"class":"class1","name":"cat1"},{"class":"class2","name":"cat2"},{"class":"class3","name":"cat3"},{"class":"class4","name":"cat4"},{"class":"class5","name":"cat5"},{"class":"class6","name":"cat6"},{"class":"class7","name":"cat7"},{'class': 'total','name':'total'}],
      labels: {
        formatter: function() {
          return this.value.name;
        },
        useHTML: true
      }
    },
    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Numbers'
        }
    },
    legend: {
      enabled: true
    },
    tooltip: {
        formatter: function () {

            return '<b>' + this.x.name + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                formatter: function(){
                    return Highcharts.numberFormat(this.percentage,0)  + '%';
                }

            }
        }
    },
    series: [{
        name: 'Ok',
        color: 'green',
        stack: 'a',
        data: [
            223,174,139,27,17,6,3,589            ]
    },
    {
        name: 'Not Ok',
        color: 'red',
        stack: 'a',
        data: [
            21,29,26,14,15,11,11,127            ]
    },
    {
        name: 'Partialy Ok',
        color:'orange',
        stack: 'a',
        data: [
            5,11,25,1,1,3,0,46            ]
    },
    {
        name: 'Not usable',
        color:'grey',
        stack: 'a',
        data: [
            20,70,67,160,163,170,168,818            ]
    },
    {
        name: 'Not done',
        color:'brown',
        stack: 'a',
        data: [
            173,158,185,240,246,252,260,1514            ]
    }
    ]
  }, function() {
    $('input[type=checkbox]').bind('click', function() {
      togglePointsByClass(this.value, $(this).is(':checked'), chart)
    });
  });
  var visibleArr = [0,1,2,3,4,5,6,7];

  function togglePointsByClass(className, shouldShow, chart) {
    var isChartDirty = false;
    if (shouldShow) {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {

        if (category.class === className) {
          visibleArr.push(i);
        }
      });
    } else {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {

        if (category.class === className && visibleArr.indexOf(i) > -1) {
          visibleArr.splice(visibleArr.indexOf(i), 1);
        }
      });
    }
    if (visibleArr.length) {
      chart.xAxis[0].update({

        min: Math.min.apply(null, visibleArr),
        max: Math.max.apply(null, visibleArr)
      })
    }
  }
  $('#container').highcharts().redraw();
});

由于

Answer 1

您可以使用axis.setExtremes()来设置yAxis的最大值。

if (visibleArr.length) {
  chart.xAxis[0].update({
    min: Math.min.apply(null, visibleArr),
    max: Math.max.apply(null, visibleArr)
  }, false, false);

  const max = visibleArr.reduce((a, b) =>  Math.max(chart.yAxis[0].stacks.columna[b].total, a), -Infinity)

  chart.yAxis[0].setExtremes(0, max);
}

示例：https://jsfiddle.net/mw7euo1a/

Highchart隐藏了一个类别，rescale正在搞乱

1 个答案: