java - 无法在 NVD3 中显示所有 X 轴刻度值

Question

历史条形图:

我正在使用 NVD3 历史条形图，但无法显示所有 X 轴刻度值。我只能显示 5 个值，而不是完整数组。请找到我的代码

var app = angular.module('plunker', ['nvd3']);


var tickMarks = [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011];
app.controller('MainCtrl', function($scope) {
  $scope.options = {
            chart: {
                type: 'historicalBarChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 60,
                    left: 50,
                    showXAxis:false,
                    showYAxis:false
                },
                x: function(d){return d[0];},
                y: function(d){return d[1];},
                showValues: true,
                reduceXTicks:"false",
                showXAxis:true,
                showYAxis:false,
                /*valueFormat: function(d){
                    return d3.format(',.1f')(d);
                },*/
                transitionDuration: 500,
                //forceX: [1],
                showMaxMin: false,
                xAxis: {
                    tickSize:'10',
                    values: [1,2,3,4,5,6,7,8,9,10],
                    axisLabel: 'X Axis',

                    tickFormat: function(d) {

                        return d;

                    },
                    //reducexTicks:true,
                    //rotateLabels: 10,
                    showMaxMin: false,


                },
                yAxis: {

                    //axisLabel: 'Y Axis',
                    //axisLabelDistance: 35,
                    /*tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }*/
                }

            }
        };

        $scope.data = [
            {
                "key" : "Quantity" ,
                "bar": true,

                "values" : [ [ 1 , 4] , [ 2 , 2] , [ 3 , 1] , [ 4 , 3] , [ 5 , 4] , [ 6 , 5] , [ 7 , 4] , [ 8 , 7] , [ 9 , 6] , [ 10 , 4] , [ 11 , 6] , [ 12 , 5] , [ 13 , 6] , [ 14 , 4] , [ 15 , 5] , [ 16 , 4] , [ 17 , 5] , [ 18 , 8] , [ 19 , 5] , [ 20 , 6] , [ 21 , 5] , [ 22 , 6] , [ 23 , 6] , [ 24 , 6] , [ 25 , 7] , [ 26 , 6] , [ 27 , 5] , [ 28 , 4], [29, 5], [30, 4], [31, 7] ],
                color:'blue'
            }];
});

请帮我解决这个问题。

Answer 1

你几乎得到了它:

reduceXTicks
staggerLabels

但是您需要将所有值包含在刻度值中:

// !!! I have not tested this on Your code, but this magic works for me.
// You also need to declare data first, then options.
values: $scope.data.values.map( function(d) { return d[0]; })