Highcharts Series Margins

Question

尋找自一段時間以來，這個問題，但我找不到一個正確的答案。

查看相關圖片。我如何才能控制/增加圖表繪製的餘量？軸和其他應該保持原樣，我想使Y軸和圖表本身之間的距離更大。

這是不是有可能？

小提琴代碼：http://jsfiddle.net/klodoma/ood4vykf/1/

$(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] 
      } 
     } 

    }], 
    tooltip: { 
     shared: true 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'left', 
     x: 80, 
     verticalAlign: 'top', 
     y: 55, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
    }, 
    series: [{ 
     name: 'Rainfall', 
     //type: 'spline', 
     yAxis: 0, 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 18.5, 26.4, 14.1, 195.6, 154.4], 
     tooltip: { 
      valueSuffix: ' mm' 
     } 

    }, 
      { 
     name: 'Rainfall2', 
     type: 'spline', 
     yAxis: 1, 
     data: [19.9, 73.5, 100.4, 111.2, 134.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     tooltip: { 
      valueSuffix: ' mm' 
     } 

    }] 
}); 

Answer 1

我已經找到了解決方案： 從Highcharts API x軸和y軸的offset屬性都可以使用。

的「招」是指定offset只是爲了第一軸，而不是全部。

yAxis: [{ // Primary yAxis 
     labels: { 
      format: '{value}°C', 
     }, 
     title: { 
      text: 'Temperature', 
     }, 
     offset: 150 
    },{ // Primary yAxis 
     labels: { 
      format: '{value}°C', 
     }, 
     title: { 
      text: 'Temperature', 
     }, 
     //offset: 50 //do not set this value 
    }, { // Secondary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Rainfall', 
     }, 
     labels: { 
      format: '{value} mm', 
     }, 
     opposite: true, 
     offset: 50 //set this value, it's an opposite axis! 
    }], 

完整的例子是在這裏： http://jsfiddle.net/klodoma/2k4akses/3/

Answer 2

您可以使用Highcharts API利用yAxis對象的offset。

的jsfiddle：http://jsfiddle.net/mariocatch/d1e6h96y/1/

yAxis: [{ // Primary yAxis 
    labels: { 
     format: '{value}°C', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     }, 
    }, 
    title: { 
     text: 'Temperature', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    opposite: true,    
    offset: 50 
}, { // Secondary yAxis 
    gridLineWidth: 0, 
    title: { 
     text: 'Rainfall', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    labels: { 
     format: '{value} mm', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    offset: 50 
}]