1

我正在尝试创建折线图。

指定刻度：7 表示折线图，但只显示 6 个刻度。

这是数据和选项值

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
      }
    ]

见 plunker - https://plnkr.co/edit/7zg62ezs730i40U0GTHy?p=preview

任何帮助，将不胜感激。

4

1 回答 1

0

我发现的一种解决方法是使用 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

或者，您可以将刻度值传递给指令：

<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')];  
  }

另请注意，“如果未设置刻度格式，刻度参数仍将传递给刻度的刻度格式函数”

于 2017-12-28T13:51:18.253 回答