javascript - 两个系列均具有动态刻度的Highchart

问题与this one有关。

问题：目前，我有2个系列的图表-一个系列为正，另一个系列为负。默认情况下，每个系列具有动态缩放比例，但它们不相关（我的意思是，如果第一个系列的20是MAX值，第二个系列的5是MAX值，那么它在图形上的外观相同）。当我将yAxis的最大值和最小值设置为yAxis时，它可以解决问题，但会增加很多空白空间，在某些情况下，列太小。是否可以将图表设置更新为具有动态缩放比例，但两个系列都可以设置为动态缩放？

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

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

}）;

最佳答案

在加载事件中，您可以找到最大的数据并动态更新轴的最大值-请参见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/