如何安裝Chart.js和angular-chart.js（錯誤：需要包含Chart.js庫）
[英]How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
問題描述
我想使用angular-chart.js所以我首先按照安裝說明從Charts.js的github下載了最新版本https://github.com/chartjs/Chart.js然后我下載了最新版本的angular-來自github的charts.js https://github.com/jtblin/angular-chart.js 。
我將這些文件復制並粘貼到我的項目中：
這個文件來自chart.js chart.js（我從chart.js復制了這個文件，注意第一個字母是小寫的）
這個文件來自angular-chart.js angular-chart.min.js
包括這兩個
<script src="/myApp/chart.js"></script>
<script src="/myApp/angular-chart.min.js"></script>
然后我將此指令添加到我的應用程序中
angular.module('myApp',
[
'zingchart-angularjs',
'oitozero.ngSweetAlert',
'chart.js'
])
但是我得到了這個錯誤
chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function) @ chart.js:4
angular-chart.min.js:10Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?
2 個解決方案
解決方案1
5 2016-10-24 14:50:37
我認為你已經下載了錯誤的Chart.js，這個錯誤： chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)...來自缺省的require函數，僅適用於node.js，在瀏覽器上工作它應該使用browsefy或等效的。 所以我想你沒有生產chart.js，正如你在片段中看到的那樣，使用CND作為angularjs，chart.js和angular-chart，它工作得很好。
- Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js - 角度圖表
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
angular.module('app', ['chart.js']); angular.module('app') .controller('MyController', function ($scope, $timeout) { $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; $scope.series = ['Series A', 'Series B']; $scope.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90] ]; $scope.onClick = function (points, evt) { console.log(points, evt); }; // Simulate async data update $timeout(function () { $scope.data = [ [28, 48, 40, 19, 86, 27, 90], [65, 59, 80, 81, 56, 55, 40] ]; }, 3000); }); angular.element(document).ready(function(){ angular.bootstrap(document, ['app']); });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script> <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> <div ng-controller="MyController"> <canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-click="onClick"></canvas> </div>
解決方案2
1 2018-05-04 20:08:14
在瀏覽器中使用。
1像卡斯特羅說的那樣，加入最方便易用的cdn。
2您可以嘗試從NPM拉。 並查看模塊並搜索具有分發文件的“dist”文件夾。 並調用將該文件添加到您的源。 我找到的版本有這個名字“Chart.bundle.js”
>YourProjectFolder
--->index.html
--->Chart.bundle.js
你的index.html文件
<head>
<script src="Chart.bundle.js"></script>
</head>
chart.js：圖表中的圖表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.