[英]Chart.JS using Angular.JS on JSFiddle
我正在尝试创建一个经过测试的图表来模仿这个文档中的这个图表。
在我的 JSFiddle ( https://jsfiddle.net/bheng/2pcmubwq/ )
我尝试添加资源中所需的所有链接:
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
我在控制台中没有看到任何错误,但是这个白屏。
我做错了什么使我的图表没有呈现?
每个 angularJs 应用程序都必须使用这些指令安装在文档中: ng-app
ng-controller
您的小提琴已修复: https://jsfiddle.net/nmwypgdq/9/
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</div>
由 controller 回调传递的$scope
object 在您的模板中可用。 您可以在模板中引用它的属性和方法。 因此chart-data="data"
将 HTML 元素属性chart-data
与 controller 回调中定义的$scope.data
绑定。 chart-labels
与$scope.labels
等绑定...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.