2016-11-28 2 views
0

Ich versuche, ein Balkendiagramm in angularjs mit nvd3 anzuzeigen, so dass X-Achse ein Datum anzeigt und Y-Achse die Zeit anzeigt. Ich habe versucht, die folgenden:NVD3 - Zeitformat

$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" 
    }] 
    }] 

Mein Problem ist, dass der Code zeigt NaN statt beliebige Werte (so vermute ich, dass ich die Werte in die falsche Richtung Parsen, konnte aber nicht eine bessere Lösung finden) Alle Idee, was könnte hier falsch sein?

Antwort

0

Das war nicht genau das, was ich suchte, aber ich schaffte es zu lösen, indem sie die Stunden in 0-24 ganzen Zahlen

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; 
     }, 
Umwandlung