javascript - Chart.js 不适用于 Angular 1.5?

标签 javascript angularjs charts chart.js angular-chart

我正在用 Angular 做一些测试,想试试这个很酷的库来做一个测试应用程序,但它不起作用:

ReferenceError: Chart is not defined angular-chart.js:13:5 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=chartist&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Dchart.js

这是我的 HTML 模板:

<!DOCTYPE HTML>
<html ng-app="chartist">
    <head>
      <meta charset="UTF8">
      <!-- Plugins/Frameworks !-->
      <script type="text/javascript" src="plugins/angular.js"></script>
      <script type="text/javascript" src="plugins/angular-route.js"></script>
      <script type="text/javascript" src="plugins/angular-chart.js"></script>

      <!-- JS !-->
      <script type="text/javascript" src="app.js"></script>
      <script type="text/javascript" src="controllers.js"></script>
     <!-- <script type="text/javascript" src="js/directives.js"></script>
      <script type="text/javascript" src="js/services.js"></script> !-->

      <!-- Stylesheets !-->
      <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="css/styles.css">
      <link rel="stylesheet" type="text/css" href="css/angular-chart.css">
    </head>
    <body>
        <div ng-view>
        </div>
    </body>
</html>

然后我通过这种方式在模块中注入(inject)依赖:

var app = angular.module('chartist', ['ngRoute', 'controllers', 'chart.js']);

app.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: 'templates/main.html',
        controller: 'mainCtrl'
    }).
    otherwise({
        redirectTo: '/index'
    });
}]);

为什么我不能使用 Chart.js?是不是版本问题?如果有人提供帮助,我会很高兴。

最佳答案

如果你仔细看错误,它确实说得很清楚

ReferenceError: Chart is not defined angular-chart.js:13:5 Error: [$injector:modulerr]

基本上 angular-chart.js 不能独立运行 API。它只是包装器指令,可以很容易地与 AngularJS 代码兼容。如果您查看 angular-chart.js 代码,您会知道它使用了 Chart 对象,该对象来自 chart.js API。

要解决您的问题,您需要添加 chart.jsangular-chart.js 之前引用,Chart 对象将可用呈现图表。

所以添加 chart.js cdn referenceangular-chart.js 之前引用以使您的代码正常工作。

我还希望您阅读 angular-chart.js 入门文档

Sample Here

关于javascript - Chart.js 不适用于 Angular 1.5?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35429220/

相关文章:

javascript - 将 JS ArrayBuffer 或 TypedArray 传递给 Emscripten,无需复制

javascript - 将数组添加到本地存储并检索该数组

javascript - 如何更改每个附加文本 Angularjs

angularjs - 如何使用 sqlite 数据库将外部服务器(JSON)的数据保存到 ionic 2 移动应用程序中

javascript - 在 Web 应用程序上使用 Adob​​e Flash 图表库是个好主意吗?

javascript - "!default"对依赖项意味着什么

javascript - 将 JavaScript 字符串传递给编译为 WebAssembly 的 Rust 函数

angularjs - ui-router 使用动态参数解析

Pandas、条形图注释

javascript - 如何在表格中显示每一行的堆栈条形图?