ハイチャートでは若干大きな数値でレンダリングされています

Question

多軸と大きな数値を使用すると、Highchartsはデータを表示するのに必要な高さを2倍にレンダリングします。垂直軸をデータに正しくフィットさせるにはどうすればよいですか？

ここではサンプルコード：

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Average Monthly Weather Data for Tokyo' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: [{ 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
      crosshair: true 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '{value}°C', 
       style: { 
        color: Highcharts.getOptions().colors[2] 
       } 
      }, 
      title: { 
       text: 'Temperature', 
       style: { 
        color: Highcharts.getOptions().colors[2] 
       } 
      }, 
      opposite: true 

     }, { // Secondary yAxis 
      gridLineWidth: 0, 
      title: { 
       text: 'Rainfall', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      labels: { 
       format: '{value} mm', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      } 

     }, { // Tertiary yAxis 
      gridLineWidth: 0, 
      title: { 
       text: 'Sea-Level Pressure', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      }, 
      labels: { 
       format: '{value} mb', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     series: [{ 
      name: 'Rainfall', 
      type: 'column', 
      yAxis: 1, 
      data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 991009.6, 1010.2, 14563.1, 1016.9, 1018.2, 1016.7], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Sea-Level Pressure', 
      type: 'spline', 
      yAxis: 2, 
      data: [967416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 1010.2, 14563.1, 991016.9, 1018.2, 1016.7], 
      marker: { 
       enabled: false 
      }, 
      dashStyle: 'shortdot', 
      tooltip: { 
       valueSuffix: ' mb' 
      } 

     }, { 
      name: 'Temperature', 
      type: 'spline', 
      data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 991010.2, 14563.1, 1016.9, 1018.2, 1016.7], 
      tooltip: { 
       valueSuffix: ' °C' 
      } 
     }] 
    }); 
}); 

ここフィドル：http://jsfiddle.net/voqxkb3m/1/

Answer 1

あなたのチャートのプロパティにalignTicks: falseを設定することができます。

更新フィドル：

• http://jsfiddle.net/jlbriggs/voqxkb3m/2/

あなたはさらにyAxis間隔を減らすためにmaxPaddingとendOnTickなどの設定を調整することができます。

• http://jsfiddle.net/jlbriggs/voqxkb3m/3/