Я рисую линейную диаграмму с ежемесячными точками данных. Тем не менее, я хочу, чтобы шкала отображала только строки года. Пока все так просто. Однако, насколько я вижу, Highcharts всегда будет рисовать метки xAxis относительно тиков ... и мне нужно отображать их по центру между тиками. Есть ли какой-то простой способ сделать это, чтобы я пропал без вести, пожалуйста ...?Highcharts: ежегодные ярлыки xAxis, расположенные между отметками
Существует несколько вариантов xAxis, которые могут помочь вам делать то, что вы хотите.
http://api.highcharts.com/highcharts#xAxis.labels
Посмотрите на «Align», который определяет, будет ли метки слева или справа от клеща, а также «х», который позволяет указать й-смещение для метки из поставить галочку.
Вы пытались использовать размещение меток? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
«Только для категорированных осей» ... – user1617662
Согласно моему пониманию, поведение вы хотите это:
http://jsfiddle.net/msjaiswal/U45Sr/2/
Позвольте мне сломать решение:
1. Ежемесячные данные Пунктов
Одна точка данных, соответствующий одному месяцу:
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Шкала для отображения только годовых тиков
Использовать параметры диаграммы, как это:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
Проблема в том, что этикетка года находится под «Январем», и это не в центре года. – mirelon
Это может быть сделано с помощью обходного вручную регулируя расположение метки с помощью обратного вызова (названный по обе нагрузки и перерисовки). Пожалуйста, ознакомьтесь со скриптой, связанной с этим в моих комментариях к этому сообщению: Highcharts - how can I center labels on a datetime x-axis?
Нет простого, готового решения. Вы должны использовать события и соответственно менять метки. Вот пример решения, который также работает при изменении размера окна браузера (или иным образом заставляя схему перерисовать), даже тогда, когда изменяется количество клеща: http://jsfiddle.net/McNetic/eyyom2qg/3/
Он работает путем присоединения тот же обработчик события как load и redraw события:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
сам обработчик выглядит следующим образом:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left')))/2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
В основном, это работает так:
Я делаю это уже. Однако данные динамичны и по мере того, как промежутки между тиками расширяются, ярлыки выглядят все более и более невероятно приклеенными к тикам ... Я не знаю, могу ли я получить количество тиков, чтобы я мог вычислить расстояние между ними и установить смещение x с выравниванием по центру на лету ... – user1617662