2017-12-18 9 views
0

꺾은 선형 차트를 만들려고합니다.nvd3 꺾은 선형 차트에 모든 틱이 나타나지 않습니다.

틱 지정 : lineChart에서는 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

합니다.

+0

플 런커에서 저는 7 틱을 볼 수 있습니다. 그래서 그것은 현재 고정되어 있거나 다른 것입니다. 나는 똑같은 문제에 대한 귀하의 게시물을 발견했습니다. 나는 Krispo nvd3와 Angular 1을 사용하고 있으며, 단지 8 대신 4 ticks를 볼 수 있습니다. – Shnigi

+0

그것은 아직 해결되지 않은 단지 6입니다. –

+0

툴팁 진드기를 의미하는 것으로 이해했으나 날짜 진드기가 제대로 표시되지 않습니다. 적어도 틱을 변경하는 경우 : 8은 더 많은 틱을 표시하지만 일부 날짜는 두 배가됩니다. – Shnigi

답변

0

한 가지 해결책은 tickValues로 틱을 설정하는 것입니다.

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

은 또한이 "인수를 체크 알 수 있습니다 : 범위

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

다음 :

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

또는 당신은이 지침에 눈금 값을 전달할 수 있습니다 눈금 형식도 설정되어 있지 않으면 눈금의 tickFormat 함수로 전달됩니다. "

+0

이 작동하지 않습니다. ' 'xAxisTickValues'는 'nvd3'의 알려진 속성이 아니기 때문에 바인딩 할 수 없습니다. –

+0

아니요 이거? https://stackoverflow.com/questions/32321185/how-to-force-nvd3-to-display-the-equal-number-of-ticks-as-that-of-theues-plo – Shnigi

+0

안녕하세요. 바이올린을 업데이트하십시오, 많은 도움이 될 것입니다, 고마워요. –