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

Javascript 使用Rickshaw JS库在X轴上显示自定义标签,javascript,charts,rickshaw,Javascript,Charts,Rickshaw,我有一个成对的数据集,{x:someValue,y:count},其中someValue是一周中的一天,形式为(1..7),其中1是“星期天”。 在Ricskshaw图表上,我想在X轴上分别显示(周一、周二等)。我该怎么做 目前我已经做了: var ticksTreatment = 'glow'; var xAxisQPerDay = new Rickshaw.Graph.Axis.Time( { graph: graphQPerDay, ticksTre

我有一个成对的数据集,
{x:someValue,y:count}
,其中
someValue
是一周中的一天,形式为(
1..7
),其中
1
是“星期天”。 在Ricskshaw图表上,我想在X轴上分别显示(周一、周二等)。我该怎么做

目前我已经做了:

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

当然,这给了我默认值1s、2s、3s等等。

类似的东西应该可以工作:

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


最好保留对“tickFormat”函数的引用,因为它可以被其他对象用于例如
HoverDetail.xFormatter
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();