angular-图表未显示饼图
angular-chart not showing Pie Chart
我的 AngularJS 应用程序出现问题,无法从使用 Chart.JS 的 angular 图表中呈现饼图。
我已将 chart.js 注册为我的 angular 模块中的依赖项,如下所示:
var app = angular.module("uniSurvey",
["common.services",
"ui.router",
"chart.js"]);
然后在我看来,我在他们的文档之后添加了饼图 canvas:
<div ng-repeat="item in resultsDetails.items">
<canvas id="pie" class="chart chart-pie chart-xs"
chart-data="resultsDetails.data"
chart-labels="resultsDetails.label"
chart-legend="resultsDetails.legend"></canvas>
</div>
在该视图的控制器中,我已将图表所需的数据设置如下:
(function () {
"use strict";
angular
.module("uniSurvey")
.controller("ResultsDetailsController", ["$stateParams", "resultResource", ResultsDetailsController]);
function ResultsDetailsController($stateParams, resultResource) {
var resultsDetails = this;
resultsDetails.currentSurveyId = $stateParams.id;
resultsDetails.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
resultsDetails.data = [300, 500, 100];
resultsDetails.legend = true;
resultsDetails.items = [];
}
}());
使用当前设置,出现以下错误:
angular.js:13550 TypeError: Cannot read property 'map' of undefined
at v (angular-chart.min.js:323)
at d (angular-chart.min.js:191)
at angular-chart.min.js:150
at n.$digest (angular.js:17073)
at n.$apply (angular.js:17337)
at l (angular.js:11572)
at H (angular.js:11778)
at XMLHttpRequest.u.onload (angular.js:11711)
请问我可能错过了哪些步骤?
原来这是一个愚蠢的错误,是 "resultsDetails.labels" 而不是 "resultsDetails.label"。因为这是我第一次使用 angular-chart,所以我认为这是另外一回事,而不是最基本的东西。
我的 AngularJS 应用程序出现问题,无法从使用 Chart.JS 的 angular 图表中呈现饼图。
我已将 chart.js 注册为我的 angular 模块中的依赖项,如下所示:
var app = angular.module("uniSurvey",
["common.services",
"ui.router",
"chart.js"]);
然后在我看来,我在他们的文档之后添加了饼图 canvas:
<div ng-repeat="item in resultsDetails.items">
<canvas id="pie" class="chart chart-pie chart-xs"
chart-data="resultsDetails.data"
chart-labels="resultsDetails.label"
chart-legend="resultsDetails.legend"></canvas>
</div>
在该视图的控制器中,我已将图表所需的数据设置如下:
(function () {
"use strict";
angular
.module("uniSurvey")
.controller("ResultsDetailsController", ["$stateParams", "resultResource", ResultsDetailsController]);
function ResultsDetailsController($stateParams, resultResource) {
var resultsDetails = this;
resultsDetails.currentSurveyId = $stateParams.id;
resultsDetails.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
resultsDetails.data = [300, 500, 100];
resultsDetails.legend = true;
resultsDetails.items = [];
}
}());
使用当前设置,出现以下错误:
angular.js:13550 TypeError: Cannot read property 'map' of undefined at v (angular-chart.min.js:323) at d (angular-chart.min.js:191) at angular-chart.min.js:150 at n.$digest (angular.js:17073) at n.$apply (angular.js:17337) at l (angular.js:11572) at H (angular.js:11778) at XMLHttpRequest.u.onload (angular.js:11711)
请问我可能错过了哪些步骤?
原来这是一个愚蠢的错误,是 "resultsDetails.labels" 而不是 "resultsDetails.label"。因为这是我第一次使用 angular-chart,所以我认为这是另外一回事,而不是最基本的东西。