0

我想在下面的 nvd3 折线图中为我的 x 轴创建诸如“星期一、星期二、星期三”等字符串。在下面的代码中，如何使 x 轴具有字符串/标签而不是数字：

$scope.options2 = {
    chart: {
        type: 'lineChart',
        height: 250,
        margin : {
            top: 20,
            right: 20,
            bottom: 40,
            left: 35
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        useInteractiveGuideline: true,
        dispatch: {
            stateChange: function(e){ console.log("stateChange"); },
            changeState: function(e){ console.log("changeState"); },
            tooltipShow: function(e){ console.log("tooltipShow"); },
            tooltipHide: function(e){ console.log("tooltipHide"); }
        },
        xAxis: {
            axisLabel: 'Time'
        },
        yAxis: {
            axisLabel: 'cd(ng/ml)',
            tickFormat: function(d){
                return d3.format('.02f')(d);
            },
            axisLabelDistance: -10
        },
        callback: function(chart){
            console.log("!!! lineChart callback !!!");
        }
    },
    title: {
        enable: true,
        text: 'Afternoon'
    },
    subtitle: {
        enable: false,
        text: '',
        css: {
            'text-align': 'center',
            'margin': '10px 13px 0px 7px'
        }
    }
};

var datax = [{
    "key" : "cope",
    "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
}];    
$scope.data2 = datax;

我正在使用这个库：https ://github.com/krispo/angular-nvd3

4

1 回答 1

1

编辑：写帖子认为你想要这个月，所以改为工作日......

你要找的是xAxis.tickFormat方法。假设您在应用程序中使用 moment.js，您可以简单地执行以下操作：

xAxis: {
  axisLabel: 'Time',
  tickFormat: function(d) {
    return moment().weekday(d).format('dddd');; // for 0, returns 'Sunday'
                                             // 'Sun' if format 'ddd'
  }
}

如果您不使用 moment，那么您可以创建一个 weekdays 数组并将 x 值映射到数组中的相同索引：

var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
...
tickFormat: function(d) {
    return daysOfWeek[d];
},...

这是一个实现了 moment.js 示例的 plunker。希望这可以帮助！

于 2016-02-24T04:03:24.333 回答