하이 차트 - 스택 막대 - 데이터 간격에 해당하는 라벨 간격을 가질 수 있습니까?

Question

Highcharts로 누적 막대 그래프를 생성하고 레이블 간의 간격에 문제가 있습니다.

내 데이터 간격은 6이며 highchart에 의해 생성 된 라벨 간격이 데모 여기를 참조하십시오 100 : http://jsfiddle.net/NjaEw/2/

내가 데이터에서 해당 라벨 간격을합니다. 여기

코드 :

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<h1>Testing</h1> 
<div id="conformity-by-page" style="width: 100%; height:250px; margin: 0 auto"></div> 

     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'conformity-by-page', 
        type: 'bar', 
        borderWidth: 1, 
        borderColor: '#000', 
        borderRadius: 0, 
        marginTop: 50 
       }, 
       exporting: { 
        enabled: false 
       }, 
       title: { 
        text: '' 
       }, 
       xAxis: { 
        lineWidth:5,  
        categories: ['Web site'], 
        //tickWidth: 0, 
        title: { 
         text: null 
        }, 
        labels: { 
         style: { 
          color: '#000000', 
          fontWeight: 'bold', 
          fontSize: '14px' 
         } 
        } 
       }, 
       yAxis: { 
        lineWidth:0, 
        title: { 
         text: 'Number of page', 
         align: 'high', 
         style: { 
          color: '#000000', 
          fontSize: '16px' 
         } 
        }, 
        labels: { 
         overflow: 'justify', 
         style: { 
          color: '#000000', 
          fontWeight: 'bold', 
          fontSize: '14px' 
         } 
        } 

       }, 
       tooltip: { 
        formatter: function() { 
         return ''+ 
          this.series.name +': '+ this.y +' règles'; 
        }, 
        backgroundColor: '#FFFFFF', 
        style: { 
         color: '#000', 
         fontSize: '14px', 
         padding: '5px' 
        } 
       }, 
       plotOptions: { 
        bar: { 
         borderColor: '#000000', 
         borderWidth: 1, 
         /*minPointLength: 10,*/ 
         pointWidth: 25, 
         stacking: 'percent', 
         dataLabels: { 
          enabled: true 
         } 
        } 
       }, 
       legend: { 
        verticalAlign: 'top', 
        backgroundColor: '#FFFFFF', 
        reversed: true, 
        shadow: true, 
        symbolWidth: 50, 
        itemStyle: { 
         color: '#000000', 
         fontSize: '15px' 
        } 
       }, 
       credits: { 
        enabled: false 
       },  series: [{ 
        name: 'Warning',data: [null], color: '#FFFF40', 
        dataLabels: { 
         style: { 
          fontSize: '15px', 
          color: '#000000' 
         } 
        } 
       }, { 
        name: 'Error',data: [3], color: '#FF8080', 
        dataLabels: { 
         style: { 
          fontSize: '15px', 
          color: '#000000' 
         } 
        } 
       }, { 
        name: 'N/A',data: [1], color: '#B5EBFB', 
        dataLabels: { 
         style: { 
          fontSize: '15px', 
          color: '#000000' 
         } 
        } 
       }, { 
        name: 'OK',data: [2], color: '#80FF80', 
        dataLabels: { 
         style: { 
          fontSize: '15px', 
          color: '#000000' 
         } 
        } 
       }] 
      }); 
     }); 

Answer 1

문제는 당신이 stacking: 'percent'를 사용하고 있다는 점이다.
'normal'으로 변경하십시오.

Demo