使用Rickshaw JS库在X轴上显示自定义标签

Question

使用Rickshaw JS库在X轴上显示自定义标签

7

我有一个包含数据对的数据集，格式为{x: someValue, y: count}，其中someValue是一周中的某一天，格式为（1..7），其中1代表"Sunday"。

我想在Ricksaw图表的X轴上分别显示（Mon, Tue..etc)。请问如何实现？

目前我已做到以下内容：

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

但这会给我默认值1s、2s、3s等等...

- Kris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Miguel Trias · Accepted Answer

类似以下这样的内容应该可以正常工作：

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();

或者

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();