Question

我正在使用Highcharts中的一些小尺寸图表，似乎由于尺寸Highcharts仅在x轴上显示交替标记的标签。我想做什么来显示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/

Answer 1

xAxis定义了两次，我合并并添加了一个名为tickInterval的新选项，该选项设置为1

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

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

指向文档的链接：http://api.highcharts.com/highcharts/xAxis.tickInterval

Answer 2

在这种情况下，如果您不需要使用其他类型的xAxis而不是类别，则可以使用步骤标签的属性。

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

示例：https://jsfiddle.net/otfq0dch/3/

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

Answer 3

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

如何在Highcharts中强制显示x轴标签？

3 个答案: