NVD3 - 時間格式

Question

我想在使用nvd3的angularjs中顯示條形圖，以便x軸顯示日期，y軸顯示時間。 我曾嘗試以下：

$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，而不是任何值（所以我想我解析值錯誤的方式，但無法找到一個更好的解決方案） 任何想法這裏可能是錯誤的嗎？

Answer 1

這不正是我一直在尋找，但我設法通過轉換的時間來解決它變成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; 
     },