並非所有的刻度線都顯示在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

任何幫助，將不勝感激。

來源

2017-12-18 Abhay Srivastav

在猛擊者中，我可以看到7個蜱蟲。所以無論是現在修復還是其他的東西。我發現你的帖子是完全一樣的問題。我正在使用Angular 1和Krispo nvd3，我只能看到4個刻度而不是8個。 – Shnigi

它只有6個，還沒有解決。 –

我明白你的意思是工具提示滴答，這很好，但日期滴答顯示不正確。至少改變滴答：8會顯示更多的滴答，但是一些日期會增加一倍。 – Shnigi

我發現的一個解決方法是您使用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函數「

來源

2017-12-28 13:51:18 Shnigi

不起作用 '不能綁定到'xAxisTickValues'，因爲它不是'nvd3''的已知屬性 –

是不是這是一個嗎？ https://stackoverflow.com/questions/32321185/how-to-force-nvd3-to-display-the-equal-number-of-ticks-as-that-of-the-values-plo – Shnigi

嘿，你能請更新小提琴，會有很大的幫助，謝謝。 –

並非所有的刻度線都顯示在nvd3折線圖中

回答

相關問題