2014-01-09 15 views
0

X 축 레이블을 내 열에 배치하고 세로 위치로 회전하고 싶습니다. 끝없이 웹을 검색했지만 지금은 아무 것도 작동하지 않는 것 같아서 내 구체적인 문제를 게시하려고합니다. 라벨 http://jsfiddle.net/D43q9/1/하이 차트 : 열 내부의 X 축 레이블

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

는 여기에 바이올린입니다. 무리 감사! –