如何解决Chart.JS 在 JSFiddle 上使用 Angular.JS
我正在尝试根据此 documentation 创建一个经过测试的图表,模仿此图表。
在我的 JSFiddle (https://jsfiddle.net/bheng/2pcmubwq/) 中
我尝试添加资源中所需的所有链接:
- https://code.angularjs.org/1.4.8/angular.js
- https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js
- https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.10.2/angular-chart.js
HTML
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
JS
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>
由控制器回调传递的 $scope
对象在您的模板中可用。您可以在模板中引用其属性和方法。因此,chart-data="data"
将 HTML 元素属性 chart-data
与控制器回调中定义的 $scope.data
绑定。 chart-labels
与 $scope.labels
绑定等等...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。