X軸上的勾號位置

Question

如何限制在Highcharts中的X軸上顯示勾號？最後一個是X軸的outter：

我來源：

var options = { 
chart: { 
    renderTo: 'chart', 
    events: { 
     load: function(event) { 
     } 
    }, 
    type: 'spline', 
    animation: false 
}, 
title: { 
    text: '' 
}, 
colors: [ 
    '#499878','black' 
], 
rangeSelector: { 
    enabled: false 
}, 
credits: { 
    enabled: false 
}, 
tooltip: { 
    shared: true, 
    crosshairs: true 
}, 






series: [{ 
    name: 'Temperature (°C)', 
    type: 'spline', 
    tooltip : { 
     valueDecimals: 2, 
     valueSuffix: ' °C' 
    }, 
    yAxis: 0, 
    color: '#89A54E', 
    data: [] 

},{ 
    name: 'Wind speed (m/s)', 
    type: 'spline', 
    tooltip : { 
     valueDecimals: 2, 
     valueSuffix: ' m/s' 
    }, 
    yAxis: 1, 
    color: '#4572A7', 
    data: [] 
},{ 
    name: 'Humidity (%)', 
    type: 'spline', 
    tooltip : { 
     valueDecimals: 2, 
     valueSuffix: ' %' 
    }, 
    yAxis: 2, 
    color: '#910000', 
    data: [] 
},{ 
    name: 'Wind direction (°)', 
    type: 'spline', 
    tooltip : { 
     valueDecimals: 2, 
     valueSuffix: ' °' 
    }, 
    yAxis: 3, 
    color: '#000000', 
    dashStyle: 'shortdot', 
    data: [] 
}], 



xAxis: { 
    type: 'datetime', 
    tickInterval: 10000, 
    min: 0, 
    max: 0 
}, 



yAxis: [{ 
    labels: { 
     style: { 
      color: '#89A54E' 
     } 
    }, 
    title: { 
     text: 'Temperature', 
     style: { 
      color: '#89A54E' 
     } 
    }, 
    gridLineWidth: 1, 
    opposite: true 
},{ 
    labels: { 
     formatter: function() { 
      return this.value +' m/s'; 
     }, 
     style: { 
      color: '#4572A7' 
     } 
    }, 
    title: { 
     text: 'Wind speed', 
     style: { 
      color: '#4572A7' 
     } 
    }, 
    gridLineWidth: 1, 
    opposite: false, 
    min: 0 
},{ 
    labels: { 
     formatter: function() { 
      return this.value +' %'; 
     }, 
     style: { 
      color: '#910000' 
     } 
    }, 
    title: { 
     text: 'Humidity', 
     style: { 
      color: '#910000' 
     } 
    }, 
    gridLineWidth: 1, 
    opposite: true 
},{ 
    labels: { 
     formatter: function() { 
      return this.value +' °'; 
     }, 
     style: { 
      color: '#000000' 
     } 
    }, 
    title: { 
     text: 'Wind direction', 
     style: { 
      color: '#000000' 
     } 
    }, 
    opposite: false, 
    reversed: true, 
    min: 0, 
    max: 360, 

    minorGridLineDashStyle: 'longdash', 
    minorTickInterval: 'auto', 
    minorTickWidth: 0, 
    tickInterval: 90 
}], 




plotOptions: { 
    spline: { 
     lineWidth: 3, 
     states: { 
      hover: { 
       lineWidth: 5 
      } 
     }, 
     marker: { 
      enabled: false 
     } 
    }, 
    scatter: { 
     marker: { 
      enabled: true 
     } 
    } 
} 
}; 

Answer 1

如果使用 'spacingRight'（http://api.highcharts.com/highcharts#chart.spacingRight）如下會發生什麼：

chart: { 
    renderTo: 'chart', 
    events: { 
     load: function(event) { 
     } 
    }, 
    type: 'spline', 
    animation: false, 
    spacingRight: 100 // you may change this for testing... 
}, 

Answer 2

我發現這是問題oveflow: 'justify'。 jsfiddle