Highchart with both dynamic scale for both series

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

这是我的例子与设置好的MAX和MIN值yAxishttp://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] 
}]

}）;

来源

2017-03-06 demo

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

来源

2017-03-06 15:21:36 morganfree

对于负y轴，需要指定'min'而非'max'。另外，@demo，你需要确保你的轴'高度'是相同的，或者使极端匹配不会达到你的目标。更新小提琴：http://jsfiddle.net/futw5e8k/10/ – jlbriggs

一个评论 - 对于我的情况正确的最大值将是'const max = Math.max（this.series [0] .dataMax，Math.abs（this.series [1] .dataMin））;' – demo

Highchart with both dynamic scale for both series

回答

相关问题