#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
}
},
Комментарии:
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. Хотя этот код может отвечать на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.