2016-11-28 29 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; 
     }, 
に時間を変換することによってそれを解決するために管理し、正確に何をしませんでした