如何安装Chart.js和angular-chart.js（错误：需要包含Chart.js库）
[英]How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
问题描述
I want to use angular-chart.js so I followed the installation instructions first I downloaded the latest version from github of Charts.js https://github.com/chartjs/Chart.js and then I downloaded the latest version of angular-charts.js from github https://github.com/jtblin/angular-chart.js . 
我想使用angular-chart.js所以我首先按照安装说明从Charts.js的github下载了最新版本https://github.com/chartjs/Chart.js然后我下载了最新版本的angular-来自github的charts.js https://github.com/jtblin/angular-chart.js 。
I copy and pasted this files into my project: 我将这些文件复制并粘贴到我的项目中：
This file is from chart.js chart.js (I copied this file from chart.js notice that the first letter is in lower case) 这个文件来自chart.js chart.js（我从chart.js复制了这个文件，注意第一个字母是小写的）
THis file is from angular-chart.js angular-chart.min.js 这个文件来自angular-chart.js angular-chart.min.js
Included both like this 包括这两个
<script src="/myApp/chart.js"></script>
<script src="/myApp/angular-chart.min.js"></script>
and then I added this directive to my app 然后我将此指令添加到我的应用程序中
angular.module('myApp',
[
'zingchart-angularjs',
'oitozero.ngSweetAlert',
'chart.js'
])
But I get this error 但是我得到了这个错误
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
I think you have downloaded the wrong Chart.js, this error: chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)... comes from the missing of require function that works natively only for node.js, to work on browser it should use browsefy or equivalent. 我认为你已经下载了错误的Chart.js，这个错误： chart.js:4 Uncaught ReferenceError: require is not defined(anonymous function)...来自缺省的require函数，仅适用于node.js，在浏览器上工作它应该使用browsefy或等效的。 Therefore I supose you don't have the production chart.js, as you can see on the snippet, using the CND for both angularjs, chart.js and angular-chart, it worked perfectly. 所以我想你没有生产chart.js，正如你在片段中看到的那样，使用CND作为angularjs，chart.js和angular-chart，它工作得很好。
- Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.jsChart.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js - Angular-chart
//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.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
To use in browser. 在浏览器中使用。
1 Like Castro said, add in the cdn which is most convinient and easy. 1像卡斯特罗说的那样，加入最方便易用的cdn。
2 You can try pull from NPM. 2您可以尝试从NPM拉。 and look into the module and search for "dist" folder, which have distribution file. 并查看模块并搜索具有分发文件的“dist”文件夹。 and call add that file to your source. 并调用将该文件添加到您的源。 The version I found have this name "Chart.bundle.js" 我找到的版本有这个名字“Chart.bundle.js”
>YourProjectFolder
--->index.html
--->Chart.bundle.js
Your index.html file 你的index.html文件
<head>
<script src="Chart.bundle.js"></script>
</head>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.