Angular-charts/Chart.js 不工作答案

【问题标题】：Angular-charts/Chart.js is not workingAngular-charts/Chart.js 不工作
【发布时间】：2017-06-11 12:11:30
【问题描述】：

我想在我的应用程序中加入图表。所以我安装了 Angular-chart.js。据我了解，该方法非常简单。但它会出现以下错误。

索引

<script  src="node_modules/chart.js/dist/Chart.js"></script>
<script  src="node_modules/angular-chart.js/dist/angular-chart.min.js">      </script>

app.js

angular.module('EventReplayingApp', ['ngRoute', 'appRoutes','chart.js']);

错误

有人有想法吗？

谢谢

【问题讨论】：

标签： angularjs chart.js

【解决方案1】：

您可以使用相同的方法，确保 angular-charts 和 chart.js 应该具有正确的版本库引用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>

演示

(function(angular) {
  'use strict';
  angular.module('myApp', ['chart.js'])
  .controller('myController', [function() {
    var ctrl = this;
    ctrl.socialChart = {
      options : {
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      },
      type: 'StackedBar',
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
        colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
        data : [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ]
    }
  }]);

})(window.angular);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi Slot Transclude</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController as ctrl">
  <canvas id="outreach" class="chart chart-bar" chart-labels="ctrl.socialChart.labels" chart-data="ctrl.socialChart.data" chart-series="ctrl.socialChart.series" chart-colors="ctrl.socialChart.colors" chart-options="ctrl.socialChart.options"></canvas>
</body>
</html>

【讨论】：

谢谢@Sajeetharan

【解决方案2】：

我假设，您使用的是 AngularJS，不是 Angular 2/4。如果是这种情况，那么您应该使用 CDN 链接作为图表库参考。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

您当前使用的图表库源，用于 node.js

【讨论】：

已解决。谢谢@ℊααnd。我不能下载这个库吗？
不客气！是的，您可以下载它们并将它们放在项目的根目录中，然后您可以使用相对路径，例如.. src="Chart.min.js" 和 src="angular-chart.min.js"