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