2010-09-15 3 views
15

У меня есть диаграммы с высоким разрешением, чтобы отображать график с кучей категорий xAxis. Все это работает нормально, но я хотел бы пропустить некоторые категории xAxis, поэтому не все показано. Вы можете увидеть пример этой работы в разделе отчетов кампании Campaign Monitor (снимок экрана: http://screencast.com/t/Y2FjNzQ4Y).Highcharts - показать любую другую категорию по оси x

Любая идея, как я могу достичь этого же макета?

ответ

4

Вы можете установить тип 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 в millisecionds, которые вы можете генерировать с помощью getTime() интервала в вашем случае будет 86400000ms, который является один день. Библиотека отображает соответствующие интервалы на основе вашего интервала данных.

+0

Как эти pointInterval и pointStart отличаются от таковых в опции «Серии»? –

+0

Чтобы быть абсолютно честным, я не смотрел на highcharts в течение нескольких месяцев, но, если я правильно помню, это связано с форматом даты и времени, и он работает с интервалами для вас, а не с использованием серии. Надеюсь, это поможет. – Gazler

0

вот мое уродливое решение :)

Я использую массив в качестве очереди. 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's an integer 
first 
var x = 0; 

Значение x должно всегда увеличиваться, когда вам нужна новая точка. http://dl.dropbox.com/u/3482121/picture/highcharts/PM/Screenshot.png

+0

http://jsfiddle.net/sharavsambuu/WAtFK/ вот пример кода – sharavsambuu

4
xAxis: { 
     categories: categoriesname, 
     labels: { 
      style: { 
       color: '#000', 
       font: '9px Trebuchet MS, Verdana, sans-serif' 
      } 
     }, 
     **tickInterval: TickInterval,**// SET THIS 
     tickPixelInterval: 80, 
     tickmarkPlacement: 'on' 
    }, 
39

Похоже, что XAxis: метки: значение шага, что должно быть использовано для достижения этой цели:

 xAxis: { 
      categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY'], 
      labels:{ 
       step: 2 // this will show every second label 
      } 
     }, 

Step Axis Labels

супер поздно, но я полагаю, что это может помочь кому-то вне.

+0

Это конкретное решение просто работало как шарм для диаграммы, где я запускал datetime xAxis на нечетный год (в данном случае, 1/1/1997). Попытка настроить tickInterval, чтобы показать каждый год, закончилась тем, что начала ось в 1996 году, у которой не было данных в моей диаграмме. Спасибо тебе за это! –

Смежные вопросы