javascript - 两个系列均具有动态比例的 Highchart

Question

问题与 this one 相关.

问题:目前我有 2 个系列的图表 - 一个系列为正值，一个系列为负值。默认情况下，每个系列都有动态缩放，但它们不相关(我的意思是，如果第一个系列的 20 是最大值，第二个系列的 5 是最大值，那么它在图表上看起来是一样的)。当我将最大值和最小值设置为 yAxis 时，它解决了问题，但增加了很多空白空间，在某些情况下列太小。我可以更新图表设置以具有动态缩放功能，但两个系列都可以使用动态缩放功能吗？

这是我为 yAxis 设置的 MAX 和 MIN 值的示例 http://jsfiddle.net/futw5e8k/6/

Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: null
},

xAxis: {
    categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
    offset: -150,
    lineWidth: 0,
    tickWidth: 0
},

yAxis: [{
    title: {
        text: null,
    },

    top: 50,
    height: 124,
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
        minorGridLineWidth: 0,
    labels: {
        enabled: false
    }
},{
        title: {
        text: null
    },
    top: 200,
    height: 150,
    offset: 0,
    min: -100,
    max: 0,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
        minorGridLineWidth: 0,
    labels: {
        enabled: false
    }
}],

plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none',
                formatter: function() {
                        return Math.abs(this.y);
                        }
            }
        }
    },
    tooltip: {
    formatter: function() {
        return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
    }
},
series: [{
    name: 'John',
    data: [1, 13, 20, 19, 15, 7, 2]
}, {
    name: 'Joe',
    yAxis: 1,
    data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]

});

Answer 1

在加载事件时，您可以找到数据的最大值并动态更新轴的最大值 - 请参阅 Axis.update() .

  chart: {
type: 'column',
events: {
  load: function() {
    const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);

    this.yAxis[0].update({
      max: max,
    }, false);

    this.yAxis[1].update({
      max: max,
      top: 130
    }, false);

    this.redraw(false);
  }
}
},

示例:http://jsfiddle.net/futw5e8k/7/