Как принудительно отображать метки по оси x в Highcharts?

#javascript #highcharts

#javascript #highcharts

Вопрос:

Я работаю с некоторыми диаграммами небольшого размера в Highcharts, и кажется, что из-за размера Highcharts показывает метки только для чередующихся тиков на оси x. Что я хотел бы сделать, чтобы показывать метки для каждого тика на оси x, даже если это означает использование меньшего шрифта. Я не смог понять, как это сделать.

Я загружаю данные csv из предварительного HTML-блока. Вот код:

 <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 /

Ответ №1:

В этом случае, если вам не нужно использовать другой тип оси X, кроме category, вы можете использовать свойство step label .

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

Пример: https://jsfiddle.net/otfq0dch/3 /

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

Комментарии:

1. Это здорово! Спасибо.

Ответ №2:

ось X определяется дважды, я консолидирую и добавляю новую опцию tickInterval, для которой установлено значение 1

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

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

ссылка на документы: http://api.highcharts.com/highcharts/xAxis.tickInterval

Ответ №3:

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

Комментарии:

1. Пожалуйста, добавьте контекст

2. Хотя этот код может отвечать на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.