2014-01-09 173 views
0

我想將我的X軸標籤放在列中並旋轉到垂直位置。我無休止地搜索了網頁,但截至目前,似乎沒有任何工作,所以我會嘗試發佈我的具體問題。Highcharts:列中的X軸標籤

這裏的小提琴:對於標籤 http://jsfiddle.net/D43q9/1/

$(document).ready(function() { 
function chart() { 
    var change = { 
     0: '', 
     25: '', 
     50: '', 
     75: '', 
     100: '' 
    }; 
    $('#chart').highcharts({ 
     legend: { 
      enabled: false 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     chart: { 
      type: 'column', 
      marginTop: 0, 
      backgroundColor: 'transparent', 
      spacingTop: 0, 
      spacingRight: 20, 
      spacingBottom: 20, 
      spacingLeft: 20 
     }, 
     plotOptions: { 
       column: { 
        pointPadding: 0, 
        borderWidth: 0, 
        groupPadding: 0.025 
       } 
      }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      categories: ['Col1','Col2','Col3','Col4','Col5','Col6'], 
      labels: { 
       style: { 
        color: '#000', 
        font: '14px Nunito', 
        top: '100px' 
       }, 
      }, 
      lineWidth: 0, 
      minorGridLineWidth: 0, 
      lineColor: 'transparent', 
      minorTickLength: 0, 
      tickLength: 0 
     }, 
     yAxis: { 
      max: 101, 
      labels: { 
       formatter: function() { 
        var value = change[this.value]; 
        return value !== 'undefined' ? value : this.value; 
       }, 
       style: { 
        color: '#fff', 
        font: '12px Nunito' 
       } 
      }, 
      title: { 
       text: null 
      }, 
      lineWidth: 0, 
      minorGridLineWidth: 0, 
      lineColor: '#444', 
      gridLineColor: '#444' 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: '', 
      data: [95,70,80,60,100,75], 
      color: '#ffd800', 
      borderColor: 'transparent' 
     }] 
    }); 
}; 
chart(); 
}); 

回答

1

設置旋轉和y的值:http://jsfiddle.net/D43q9/2/

 xAxis: { 
      categories: ['Col1','Col2','Col3','Col4','Col5','Col6'], 
      labels: { 
       rotation: -90, 
       y: -20, 
       style: { 
        color: '#000', 
        font: '14px Nunito', 
        top: '100px' 
       }, 
      }, 
      lineWidth: 0, 
      minorGridLineWidth: 0, 
      lineColor: 'transparent', 
      minorTickLength: 0, 
      tickLength: 0 
     } 
+0

這工作。謝謝一堆! –