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

Question

I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. 我正在使用Highcharts中的一些小尺寸图表，并且由于Highcharts的尺寸，它似乎仅在x轴上显示交替刻度的标签。 What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. 我想做的是在x轴上为每个刻度显示标签，即使这意味着使用较小的字体也是如此。 I haven't been able to figure out how to do this. 我还无法弄清楚该怎么做。

I'm loading csv data from a pre HTML block. 我正在从预HTML块加载csv数据。 Here's the code: 这是代码：

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

And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/ 这是一个jsFiddle： https ://jsfiddle.net/otfq0dch/1/

Answer 1

the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1 xAxis被定义了两次，我合并并添加了一个称为tickInterval的新选项，该选项设置为1

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

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

link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval 链接到文档： http : //api.highcharts.com/highcharts/xAxis.tickInterval

Answer 2

In this case, if you dont need to use other type of xAxis than category, you can use step label's property. 在这种情况下，如果您不需要使用类别以外的其他类型的xAxis，则可以使用步骤标签的属性。

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

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

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

Answer 3

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

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

问题描述

3 个解决方案

解决方案1
1 2016-10-12 07:18:33

解决方案2
1 已采纳 2016-10-12 11:09:51

解决方案3
0 2017-02-04 02:07:31

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

问题描述

3 个解决方案

解决方案1 1 2016-10-12 07:18:33

解决方案2 1 已采纳 2016-10-12 11:09:51

解决方案3 0 2017-02-04 02:07:31

解决方案1
1 2016-10-12 07:18:33

解决方案2
1 已采纳 2016-10-12 11:09:51

解决方案3
0 2017-02-04 02:07:31