Highcharts - показать любую другую категорию по оси x
У меня есть Highcharts, чтобы отображать график с кучей категорий xAxis. Все это работает нормально, но я хотел бы пропустить некоторые категории xAxis, поэтому не все показано. Вы можете увидеть пример этой работы в разделе отчетов Monitor Monitor (снимок экрана: http://screencast.com/t/Y2FjNzQ4Y).
Любая идея, как я могу достичь этого же макета?
Ответы
Ответ 1
Вы можете установить тип xAxis как 'datetime', а затем установить pointInterval и PointStart в plotoptions.
Пример кода:
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
"xAxis": {
"type": "datetime"
"plotOptions": {
"line": {
"pointInterval": 86400000,
"pointStart": 1282408923000
}
},
});
});
Цифры, которые вы видите для pointInterval и Start, находятся в миллисекундах, которые вы можете сгенерировать с помощью getTime(). Интервал в вашем случае будет 86400000ms который является одним днем. Библиотека отображает соответствующие интервалы на основе вашего интервала данных.
Ответ 2
Кажется, что xAxis: labels: значение шага - это то, что должно быть использовано для достижения этого:
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY'],
labels:{
step: 2 // this will show every second label
}
},
Метки Step Axis
Супер поздно, но я полагаю, это может помочь кому-то.
Ответ 3
xAxis: {
categories: categoriesname,
labels: {
style: {
color: '#000',
font: '9px Trebuchet MS, Verdana, sans-serif'
}
},
**tickInterval: TickInterval,**// SET THIS
tickPixelInterval: 80,
tickmarkPlacement: 'on'
},
Ответ 4
вот мое уродливое решение:)
Я использую массив как очередь. http://javascript.about.com/library/blqueue.htm
если вы заполняете данные точки в очереди, вы можете установить даты для своей серии диаграмм.
var myQueue = new Array();
var myPoint = [x, y]; myQueue.push(myPoint);
chart.series[0].setData(myQueue);
my X axis is not a datetime, it an integer
first
var x = 0;
Значение x должно всегда увеличиваться, когда вам нужна новая точка.
http://dl.dropbox.com/u/3482121/picture/highcharts/PM/Screenshot.png