角度图表 - 无法读取数据
问题描述:
第一次使用chart.js
,我有一个图表问题,无法读取模型中的数据。角度图表 - 无法读取数据
此前我有一个错误Error: $injector:modulerr Module Failed to instantiate module chart.js
。通过将依赖关系从chart.js
更改为angularCharts
来解决这个问题,尽管大部分(接近全部)使用chart.js
。我已经编写了所需的控制器和属性/值,但该图不会读取数据。
不知道是什么问题,无论是我使用错误的依赖关系(angularCharts
)还是问题$scope
。有任何想法吗?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js"></script>
<div class="col-md-6 text-xs-center" ng-controller="LineCtrl">
<h2>Cost Analysis</h2>
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
</div>
var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', 'angularCharts']);
app.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
// Simulate async data update
$timeout(function() {
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40]
];
}, 3000);
}])
答
要导入错误的库。
你有进口angular-charts
位于https://github.com/chinmaymk/angular-charts。
但是,你正在使用的是位于angular-chart
一部分在http://jtblin.github.io/angular-chart.js/
你是正确的,首先当你包括chart.js
依赖指令,你只是有错误的库。
angular.module('myModule', ['chart.js']);
这里是你的代码的工作版本:https://plnkr.co/edit/tUsMwgOBcFJrV1xTMcF0?p=preview
我硬是一两分钟前制定了这一点。我发誓我失去了愚蠢的错误的时间。谢谢 –