Question

在nvd3图表中，我无法理解为什么在某些月份的x-ticks中会出现重复。我的数据或我的$ scope.options1设置中是否存在任何问题？在附图中，您可以注意到09-13,12-13,03-14,06-14重复两次。我的数据和选项如下：

data = [{"values":[[1383264000000,1762],[1377990000000,1047.17],[1391212800000,1165.01],[1396306800000,3379.09],[1398898800000,2317.91],[1380582000000,1765.59],[1375311600000,650.2],[1388534400000,7008.33],[1393632000000,3121.12],[1385856000000,3518.7],[1404169200000,671.33],[1401577200000,1651.07]],"key":"GSR"}];



                    $scope.options1 = {
                        chart : {
                            type : 'lineChart',                             
                            height : 400,
                            text : 'Recovery ',
                            margin : {
                                "top" : 20,
                                "right" : 50,
                                "bottom" : 40,
                                "left" : 55
                            },
                            x : function(d) {
                                return d[0];
                            },
                            y : function(d) {
                                return d[1];
                            },
                            useVoronoi : false,
                            clipEdge : true,
                            transitionDuration : 1000,
                            useInteractiveGuideline : true,
                            xAxis : {
                                tickFormat : function(d) {                                  
                                    return d3.time.format('%m-%y')(
                                            new Date(d))
                                },
                                showMaxMin : false
                            },
                            yAxis : {
                                tickFormat : function(d) {
                                    return '$'
                                            + d3.format('.02f')(d / 1000)
                                            + 'K'
                                }

                            }
                        }
                    };

enter image description here

Answer 1

发生这种情况的原因是nvd3创建了一定数量的刻度。解决这个问题的方法是稍微修改nvd3框架，以允许您使用标准的d3时间间隔。有关详细信息，请参阅我对此问题的回答：

With NVD3.js (nv.models.lineWithFocusChart), how do you set specific ticks on X-axis, when x values are dates?

对nvd3框架进行更改后，您的代码应如下所示：

$scope.options = {
    chart : {
       ... 
        xScale : d3.time.scale(), // <-- explicitly set time scale
        xAxis : {
            ticks : d3.time.months, // <-- add formatter for the ticks
            tickFormat : function(d) {
                    return d3.time.format('%m-%y')(new Date(d))
            },
        ...
    }
};

Answer 2

现在可以在不必修改为nvd3源的情况下完成此操作

e.g。

xAxis: {
  showMaxMin: true,
  ticks: d3.time.months,
  tickFormat: function(d) {
    return d3.time.format('%B')(new Date(d));
  }
},

nvd3，x轴刻度重复某些月份

2 个答案: