2016-10-12 42 views
1

私はHighchartsのいくつかの小さなサイズのチャートで作業しています、そして、それはHighchartsがX軸上の交互のティックだけのラベルを表示しているようです。より小さいフォントを使用することを意味していても、x軸上のすべてのティックのラベルを表示するために何をしたいのですか?私はこれを行う方法を理解することができませんでした。Highchartsでx軸ラベルの表示を強制するには?

事前HTMLブロックからcsvデータをロードしています。 は、ここでは、コードです:

<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' 
    }] 
    }); 
}); 

そして、ここではjsFiddleです:https://jsfiddle.net/otfq0dch/1/

答えて

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

文脈を追加してください – coatless

+0

このコードは質問に答えるかもしれませんが、なぜこのコードが質問に答えるか、および/またはどのようにして文脈を追加するかによって、長期的な価値が向上します。 –

関連する問題