Отображение пользовательских меток по оси X с библиотекой Rickshaw JS

У меня есть набор данных с парами {x: someValue, y: count}, где someValue — день недели в форме (1..7), где 1 — "воскресенье". На диаграмме Ricskshaw я хотел бы отображать (Mon, Tue..etc) соответственно по оси X. Как я могу это сделать?

На данный момент я сделал:

var ticksTreatment = 'glow';
var xAxisQPerDay = new Rickshaw.Graph.Axis.Time( {
          graph: graphQPerDay,
          ticksTreatment: ticksTreatment
      } );
xAxisQPerDay.render();

но это дает мне, конечно, значения по умолчанию 1 с, 2 с, 3 с и т. д.


javascript charts rickshaw
person Kris    schedule 07.11.2012    source источник

Ответы (1)


arrow_upward
17
arrow_downward

Что-то вроде этого должно работать:

var xAxisQPerDay = new Rickshaw.Graph.Axis.X({
    graph: graphQPerDay,
    tickFormat: function(x) {
        switch (x) {
            case 1: return 'Mon';
            case 2: return 'Tue';
            case 3: return 'Wed';
            case 4: return 'Thu';
            case 5: return 'Fri';
            case 6: return 'Sat';
            case 7: return 'Sun';
        }
    }
});

xAxisQPerDay.render();

Более динамичный подход, если вы построили карту сбоку для кэширования полевых данных.

var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
var xAxisQPerDay = new Rickshaw.Graph.Axis.X({
    graph: graphQPerDay,
    tickFormat: function(x) {
        return days[x];
    }
});

xAxisQPerDay.render();

OR

var days = { 0: 'Mon', 1: 'Tue', 2: 'Wed', 3: 'Thu', 4: 'Fri', 5: 'Sat', 6: 'Sun' };
var xAxisQPerDay = new Rickshaw.Graph.Axis.X({
    graph: graphQPerDay,
    tickFormat: function(x) {
        return days[x];
    }
});

xAxisQPerDay.render();
person Miguel Trias    schedule 01.02.2013
comment
лучше сохранить ссылку на функцию 'tickFormat', потому что она может использоваться другими объектами, например, для HoverDetail.xFormatter - person pstanton; 12.05.2015