我正在尝试使用dimple.js构建堆积条形图，我需要通过angular指令执行此操作，所以我正在使用angular-dimple
这是我编写的运行示例示例的代码：
<script type="text/javascript">
var app = angular.module("dimpleTestApp", ['angular-dimple']);
app.controller('myCtrl', ['$scope', 'dataService', function($scope, dataService) {
dataService.getData().then(function(response) {
$scope.graphData = response.data;
console.log($scope.graphData);
});
}])
.service('dataService', ['$http', function($http) {
return {
getData: function() {
return $http.get('data.json');
}
};
}]);
</script>
</head>
<body ng-app='dimpleTestApp'>
<div ng-controller="myCtrl">
<graph data="graphData" orientation="horizontal">
<x-axis field="Month"></x-axis>
<y-axis field="Sales"></y-axis>
<stacked-bar field="storeId" value="2"></stacked-bar>
</graph>
</div>
</body>
但是运行此代码时出现此错误：
TypeError: Cannot read property '_hasCategories' of null
at null.<anonymous> (http://dimplejs.org/dist/dimple.v2.0.0.min.js:1:10314)
at Array.forEach (native)
at _getSeriesData (http://dimplejs.org/dist/dimple.v2.0.0.min.js:1:9714)
at draw (http://dimplejs.org/dist/dimple.v2.0.0.min.js:1:20275)
at draw (http://localhost/angular-dimple/bower_components/angular-dimple/lib/angular-dimple.js:175:15)
at addBar (http://localhost/angular-dimple/bower_components/angular-dimple/lib/angular-dimple.js:428:25)
at Object.fn (http://localhost/angular-dimple/bower_components/angular-dimple/lib/angular-dimple.js:433:11)
at g.$get.g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js:110:464)
at g.$get.g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js:113:468)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js:73:183)
谁能告诉我此应用程序有什么问题以及如何使它运行。
最佳答案
我已经通过更深入地研究角度酒窝库解决了这一问题。
他们的文档指令使用x和y元素创建时出错，而在示例中他们提到了x-axis和y-axis，因此当我对其进行更正时，将其更改为有效。
这是修改后的代码：
<graph data="graphData" orientation="horizontal">
<x field="Month"></x>
<y field="Sales"></y>
<stacked-bar field="storeId" ></stacked-bar>
</graph>