Chart.JS 在 JSFiddle 上使用 Angular.JS

Question

我正在嘗試創建一個經過測試的圖表來模仿這個文檔中的這個圖表。

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

結果

我在控制台中沒有看到任何錯誤，但是這個白屏。

我做錯了什么使我的圖表沒有呈現？

Answer 1

每個 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等綁定...