Chart.JS 在 JSFiddle 上使用 Angular.JS

Question

我正在尝试根据此 documentation 创建一个模仿此图表的测试图表。

在我的 JSFiddle (https://jsfiddle.net/bheng/2pcmubwq/)

我尝试在资源中添加所有需要的链接：

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]
  ];
});

结果

我在控制台中没有看到任何错误，但是这个白屏。

我做错了什么导致我的图表没有呈现？

Answer 1

每个 angularJs 应用程序都必须使用这些指令安装在文档中：ng-app ng-controller
您的 fiddle 修复：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 等等...

Chart.JS 在 JSFiddle 上使用 Angular.JS

Chart.JS using Angular.JS on JSFiddle

javascript

angularjs

chart.js

cdn

jsfiddle

HTML

JS

结果