두 시리즈의 동적 스케일이있는 하이 차트

Question

질문은 this one과 관련됩니다.

문제점 : 현재 2 시리즈의 차트가 있습니다. 하나의 세리에는 양수이고 다른 하나는 음수 값입니다. 기본적으로 각각의 세리에는 동적 인 스케일링을 가지고 있지만 그것들은 관련이 없습니다 (첫 번째 세리에 20은 MAX 값이고 두 번째 세리에는 5 일 때 MAX 일 때 그래프처럼 보입니다). yAxis에 최대 값과 최소값을 설정하면 문제가 해결되지만 빈 공간이 많아지면 일부 경우 열이 너무 작아집니다. 동적 설정이 가능하도록 차트 설정을 업데이트 할 수 있습니까? 여기

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

})에 대한 걸렸고 MAX 및 MIN 값 내 일례이다;

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); 
    } 
} 
}, 

예 : 부정적인 Y 축 http://jsfiddle.net/futw5e8k/7/