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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试创建折线图。并非所有的刻度线都显示在nvd3折线图中

指定ticks：7表示lineChart，但只有6个ticks出现。

这是数据和选项值

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

任何帮助，将不胜感激。

回答：

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

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

还要注意这个“嘀论证会如果还没有设置刻度格式，仍然会传递给刻度的tickFormat函数“

以上是 并非所有的刻度线都显示在nvd3折线图中 的全部内容， 来源链接： utcz.com/qa/263190.html

回到顶部