Highcharts에서 x 축 레이블을 강제로 표시하는 방법은 무엇입니까?

Highcharts의 작은 크기 차트로 작업하고 있는데, Highcharts의 크기가 x 축에 번갈아 표시되는 틱을 표시하고있는 것으로 보입니다. 더 작은 글꼴을 사용한다고해도 x 축의 모든 눈금에 대한 레이블을 표시하려면 어떻게해야합니까? 나는 이것을하는 방법을 알아낼 수 없었다.Highcharts에서 x 축 레이블을 강제로 표시하는 방법은 무엇입니까?

사전 HTML 블록에서 CSV 데이터를로드하고 있습니다. jsFiddle

<body> 
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div> 
</body> 

<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div> 
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy, 
2009,1.9000,-2.1000, 
2010,7.6000,3.8000, 
2011,6.0000,3.7000, 
2012,0.9000,4.1000, 
2013,-0.1000,3.2000, 
2014,5.8000,4.1000, 
</pre> 

$(function() { 
$('#chart_left_1').highcharts({ 
chart: { 
     borderColor: '#000080', 
    borderRadius: 0, 
     borderWidth: 2 
    }, 
    title: {text: 'GDP Growth', margin: 0}, 
    exporting: {enabled: false}, 
    legend: {enabled: false}, 
    subtitle: {text: null}, 
    xAxis: { 
     }, 
    yAxis: { 
     tickInterval: 2, 
     title: {text: null}, 
     labels: { 
     formatter: function() { 
      return this.value + '%'; 
      } 
     }, 
    }, 
    tooltip: { 
     enabled: true, 
    valueSuffix: '%' 
    }, 
    data: { 
     csv: document.getElementById('gdpgr').innerHTML, 
     startRow: 1, 
     endRow: 11, 
     endColumn: 2, 
     firstRowAsNames: false 
    }, 

    xAxis: { 
     allowDecimals: false 
    }, 

    series: [{ 
     type: 'column', 
     name: ' GDP growth', 
     color: '#000080' 
},{ 
     type: 'column', 
     name: 'US GDP Growth', 
     color: '#CCCCCC' 
    }] 
    }); 
});

그리고 다음과 같습니다 : https://jsfiddle.net/otfq0dch/1/는 x 축이 두 번 정의

출처

2016-10-12 Shark7

다른 유형의 xAxis 카테고리를 사용할 필요가없는 경우 단계 라벨의 속성을 사용할 수 있습니다.

xAxis: { 
    type: 'category', 
    allowDecimals: false, 
    labels: { 
    step: 1 
    } 
},

예 : https://jsfiddle.net/otfq0dch/3/

http://api.highcharts.com/highcharts/xAxis.labels.step

출처

2016-10-12 11:09:51 morganfree

이 위대하다! 고맙습니다. – Shark7

, 내가 통합하고 1

https://jsfiddle.net/otfq0dch/2/

로 설정되어 tickInterval라는 새로운 옵션을 추가 여기에 코드입니다

xAxis: { 
    allowDecimals: false, 
    tickInterval: 1 
},

문서로 연결 : http://api.highcharts.com/highcharts/xAxis.tickInterval

출처

2016-10-12 07:18:33 Jag

xAxis: { 
    type: 'category', 
    allowDecimals: true, 
    labels: { 
    step: 1 
    } 
    },

출처

2017-02-04 02:07:31 Kondal

문맥을 추가하십시오. – coatless

이 코드가 질문에 대답 할 수 있지만, 왜이 코드가 질문에 대한 대답을하는 지에 대한 추가 컨텍스트를 제공하면 장기적인 가치가 향상됩니다. –

Highcharts에서 x 축 레이블을 강제로 표시하는 방법은 무엇입니까?

답변

관련 문제