2016-11-28 9 views
0

x 축에 날짜가 표시되고 y 축에 시간이 표시되도록 nvd3을 사용하여 angularjs에 막 대형 차트를 표시하려고합니다. 내가 시도 다음NVD3 - 시간 형식

$scope.options1 = { 
    chart: { 
     type: 'discreteBarChart', 
     height: 450, 
     margin: { 
     top: 20, 
     right: 20, 
     bottom: 50, 
     left: 55 
     }, 
     x: function(d) { 
     return d.date; 
     }, 
     y: function(d) { 
     return d.hour; 
     }, 
     showValues: true, 
     duration: 500, 
     xAxis: { 
     axisLabel: 'Date', 
     tickFormat: function(d) { 
      return d3.time.format('%d-%m-%y')(new Date(d)); 
     } 
     }, 
     yAxis: { 
     axisLabel: 'Time of Day', 
     axisLabelDistance: -10, 
     tickFormat: function(d) { 
      return d3.time.format("%H%p")(new Date(d)); 
     } 
     } 
    } 
    }; 

    $scope.data1 = [{ 
    key: "Cumulative Return", 
    values: [{ 
     "date": "01-Jun-16", 
     "hour": "9AM" 
    }, { 
     "date": "04-Jun-16", 
     "hour": "10AM" 
    }, { 
     "date": "02-Jun-16", 
     "hour": "2PM" 
    }, { 
     "date": "03-Jun-16", 
     "hour": "4PM" 
    }] 
    }] 

내 문제는 코드 (그래서 내가 값 길을 잘못 해석하고있어하지만 더 나은 솔루션을 찾을 수 없습니다 가정) 대신 모든 값의 NaN의 표시이다 모든 여기에 뭐가 잘못 됐는지 생각해?

답변

0

이 내가 찾던 정확히 무엇을했지만, 난 0-24 정수

x: function(d) { 
     return d3.time.format('%d-%m-%y')(new Date(d.date)); 
     }, 
     y: function(d) { 
     var timeParser = d3.time.format("%I%p"); 
     var time = new Date(timeParser.parse(d.hour)); 
     var hour = time.getHours(); 
     return hour; 
     }, 
로 시간을 변환하여 그것을 해결하기 위해 관리