Question

问题与this one有关。

问题：目前我有2个系列的图表 - 一个系列正面，另一个负值。默认情况下，每个系列都有动态缩放但它们没有关联（我的意思是如果第一个系列的20是MAX值而第二个系列的5是MAX，那么它在图形上看起来就像是相同的）。当我将最大值和最小值设置为yAxis时，它解决了问题，但增加了很多空白空间，在某些情况下，列太小了。我可以更新图表设置以获得动态scalling，但两个系列都有一个吗？

以下是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]
}]

}）;

Answer 1

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

两个系列的动态比例高清图

1 个答案: