Highcharts不好的呈現與稍大的數字

Question

當我使用多軸和大數字時，Highcharts渲染顯示數據所需高度的兩倍。我如何才能正確地擬合數據的垂直軸？

下面的示例代碼：

$(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/

您可以調整像maxPadding和endOnTick設置，以進一步降低yAxis間距。

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