私はAngular nvd3離散棒グラフを使用しています.$httpから値をフェッチして離散棒グラフに表示しています.チャートは私の値を適切に示していますが、TypeError: Cannot read property 'length' of undefinedのようなエラーが発生します. どのように解決できますか.このエラー?
以下は私のコードです:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script type="text/javascript">
var app = angular.module('plunker', ['nvd3']);
angular.module('plunker').controller('discreteBarChartCtrl', function($scope,$http){
$scope.myjson=[];
$http({
method : "GET",
url : "http://localhost/slim/myjs.php/getjson",
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function mySucces(response) {
$scope.myjson=response.data;
//console.log($scope.myjson);
},function myError(response) {
$scope.myjson=response.statusText;
});
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
width:600,
yDomain:[0,200],
x: function(d){return d.day;},
y: function(d){return d.second;},
showValues: true,
valueFormat: function(d){
return d3.format(',f')(Math.abs(d));
},
duration: 500,
xAxis: {
axisLabel: 'Days'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance:10,
tickFormat: function(d){
return d3.format(',f')(Math.abs(d));
},
valueFormat: function(d){
return d3.format(',f')(Math.abs(d));
}
}
}
};
});
</script>
</head>
<body ng-controller="discreteBarChartCtrl">
<nvd3 options="options" data="[{ key: 'Cumulative Return', values: myjson.mydata }]">
</nvd3>
</body>
</html>
私の $http json 応答は次のようなものです:
{"mydata":[{"day":1,"second":14},{"day":2,"second":5},{"day":3,"second":85},{"day":4,"second":15},{"day":5,"second":50},{"day":6,"second":35},{"day":7,"second":55},{"day":8,"second":39},{"day":9,"second":105},{"day":10,"second":115},{"day":11,"second":55},{"day":12,"second":25}]}