Question

我正在尝试创建折线图。

指定刻度：7表示lineChart，但只显示6个刻度。

这是数据和选项值

＆＃13;

this.options = {
      chart: {
        type: 'lineChart',
        showYAxis:false,
        showLabels:true,
        showLegend:false,
        reduceXTicks: false,
        margin : {
          top: 20,
          right: 20,
          bottom: 40,
          left:20
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        xAxis: {
          tickFormat:function(d) { 
            return d3.time.format('%b %d')(new Date(d)); 
          },
          ticks:7
        }
      }
    };

    this.data=[
      {
        values: [    
        {x: new Date('2015-03-23'),y:10},
        {x:new Date('2015-03-24'),y:20},
        {x:new Date('2015-03-25'),y:5},
        {x: new Date('2015-03-26'),y:10},
        {x:new Date('2015-03-27'),y:15},
        {x:new Date('2015-03-28'),y:20},
        {x:new Date('2015-03-29'),y:40}
        ],
        key: 'Cosine Wave',
        color: '#d0021c',
        area:true
      }
    ]

＆＃13;

请参阅plunker - https://plnkr.co/edit/7zg62ezs730i40U0GTHy?p=preview

任何帮助都将不胜感激。

Answer 1

我发现的一个解决方法是使用tickValues设置滴答。

var xAxis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);

https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues

或者您可以将tick值传递给指令：

<nvd3-line-chart  
  data="graphData"   
  xAxisTickValues="xAxisTicks"  
</nvd3-line-chart>

然后在范围内：

$scope.xAxisTicks = function(){  
    return [new Date('2013-12-31'), new Date('2014-1-1'), new Date('2014-1-2')];  
  }

另请注意，如果没有设置刻度格式，这个“tick参数仍会传递给scale的tickFormat函数”

并非所有刻度都显示在nvd3折线图中

1 个答案: