NVD3 선형 차트 X 축은 초기 9 개의 값만 표시합니다.

Question

플 런커에서 분기하는 NVD3 Line Chart을 사용 중입니다. 나는 52 주간의 데이터를 가지고 있지만, 꺾은 선형 차트의 x 축은 처음 9 주간의 데이터 만 사용합니다. 아래에있는 내 코드를 찾아주세요 -

가

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 
    $scope.options = { 
      chart: { 
       type: 'lineChart', 
       height: 450, 
       margin : { 
        top: 20, 
        right: 20, 
        bottom: 40, 
        left: 55 
       }, 
        showControls: false, 
        showValues: true, 
        x: function (d) { return d.x; }, 
        y: function (d) { return d.y; }, 
        useInteractiveGuideline: true, 
        duration: function (d, i) { return parseInt(i + 1) * 600; }, 
        xAxis: { 
         axisLabel: 'Week', 
         tickFormat: function (d) { 
          return d 
         }, 
         reduceXTicks:false, 
         staggerLabels:false 
        }, 
        yAxis: { 
         axisLabel: 'Loss', 
         tickFormat: function (d) { 
          return d3.format(",.2f")(d) 
         }, 
         //axisLabelDistance: -10 
        } 
      }, 
     }; 

     $scope.data = sinAndCos(); 

     /*Random Data Generator */ 
     function sinAndCos() { 
      var ApplicableLossHighData = [{"x":"1","y":"1.65"},{"x":"2","y":"1.6"},{"x":"3","y":"1.65"},{"x":"4","y":"1.55"},{"x":"5","y":"1.7"},{"x":"6","y":"1.45"},{"x":"7","y":"1.65"},{"x":"8","y":"1.65"},{"x":"9","y":"1.55"},{"x":"10","y":"1.6"},{"x":"11","y":"1.6"},{"x":"12","y":"1.55"},{"x":"13","y":"1.75"},{"x":"14","y":"1.65"},{"x":"15","y":"1.65"},{"x":"16","y":"1.7"},{"x":"17","y":"1.65"},{"x":"18","y":"1.8"},{"x":"19","y":"1.8"},{"x":"20","y":"1.7"},{"x":"21","y":"1.8"},{"x":"22","y":"1.75"},{"x":"23","y":"1.7"},{"x":"24","y":"1.65"},{"x":"25","y":"1.6"},{"x":"26","y":"1.65"},{"x":"27","y":"1.65"},{"x":"28","y":"1.5"},{"x":"29","y":"1.55"},{"x":"30","y":"1.55"},{"x":"31","y":"1.5"},{"x":"32","y":"1.45"},{"x":"33","y":"1.7"},{"x":"34","y":"1.65"},{"x":"35","y":"1.6"},{"x":"36","y":"1.65"},{"x":"37","y":"1.65"},{"x":"38","y":"1.65"},{"x":"39","y":"1.85"},{"x":"40","y":"1.9"},{"x":"41","y":"1.9"},{"x":"42","y":"1.8"},{"x":"43","y":"1.9"},{"x":"44","y":"1.85"},{"x":"45","y":"1.85"},{"x":"46","y":"1.8"},{"x":"47","y":"1.8"},{"x":"48","y":"1.8"},{"x":"49","y":"1.55"},{"x":"50","y":"1.5"},{"x":"51","y":"1.45"},{"x":"52","y":"1.5"}] 
      return [{values: ApplicableLossHighData,  //values - represents the array of {x,y} data points 
        key: 'High', //key - the name of the series. 
        color: '#ff7f0e', //color - optional: choose your own line color. 
        }] 
     } 
}); 

는 출력 :

이 해결을 도와주세요.

Answer 1

문제는 문자열 값을 x 함수에 전달한다는 것입니다. 축은 "5"옆에 "52"를 배치합니다. 다음을 수행해야합니다.

x: function (d) { return +d.x; }, 
y: function (d) { return +d.y; }, 

문자열 값을 number로 강제 변환합니다.