javascript - 图表 JS 错误 : Chart is not defined Firefox

Question

我是 Chart JS 的新手，我目前在 Angular JS 1.5.3 版和 Chart JS 中使用它，我使用的是 2.1.4 版，这是我下面的代码

var myChart = new Chart(ctx, {
type: 'line',
data: {
  labels: dates,
  datasets: [{
    label: 'Player Count',
    data: count,
    backgroundColor: "rgba(153,255,51,0.6)"
  }]
},
options: {
  tooltips: {titleFontSize:29, bodyFontSize:29},
  scales: {
    xAxes: [{
      display: true,
      gridLines: {
        display: true
      },
      ticks: {
       fontColor: '#000000'
     },
      scaleLabel: {
        display: true,
        labelString: 'Date',
        fontColor: '#000000'
      }
    }],
    yAxes: [{
      display: true,
      gridLines: {
        display: true
      },
      ticks: {
       fontColor: '#000000'
      },
      scaleLabel: {
        display: true,
        labelString: 'Player Count',
        fontColor: '#000000'
      }
    }]
  }
}

});

我看到我的图表显示在 Chrome 中，但在 Firefox 中我收到此错误

Error: Chart is not defined

我不确定是什么原因，任何反馈都会有所帮助，谢谢

Answer 1

这是因为，在您创建图表时，ChartJS 库尚未加载。

你应该在窗口加载事件上初始化你的图表，就像这样......

var app = angular.module('app', []);

app.controller("myCtrl", function($scope) {

   $scope.load = function() {
      var myChart = new Chart(canvas, {
         type: 'line',
         data: {
            labels: ['Jan', 'Feb', 'Mar'],
            datasets: [{
               label: 'Player Count',
               data: [1, 2, 3],
               backgroundColor: "rgba(153,255,51,0.6)"
            }]
         },
         options: {
            tooltips: {
               titleFontSize: 29,
               bodyFontSize: 29
            },
            scales: {
               xAxes: [{
                  display: true,
                  gridLines: {
                     display: true
                  },
                  ticks: {
                     fontColor: '#000000'
                  },
                  scaleLabel: {
                     display: true,
                     labelString: 'Date',
                     fontColor: '#000000'
                  }
               }],
               yAxes: [{
                  display: true,
                  gridLines: {
                     display: true
                  },
                  ticks: {
                     fontColor: '#000000'
                  },
                  scaleLabel: {
                     display: true,
                     labelString: 'Player Count',
                     fontColor: '#000000'
                  }
               }]
            }
         }
      });
   }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
   <canvas id="canvas" ng-init="load()"></canvas>
</div>