Question

我想在下面的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

Answer 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'
  }
}

如果你没有使用片刻，那么你可以创建一个工作日数组并将x值映射到数组中的相同索引：

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

Here's a plunker with the moment.js example implemented。希望这有帮助！

使用角度NVD3创建x轴标签

1 个答案: