Highcharts未定义。控制台中的错误日志。

Question

请帮助我。这是我的Angular应用程序中控制台中的错误日志。

我的应用程序部分：

angular.module('fbApp', [
        'ngSanitize',
        'ngRoute',
        'ui.bootstrap',     
        'ui.router',         
        'ui.utils',
        'chieffancypants.loadingBar',
        'ui.date',
        'angular-underscore',
        'highcharts-ng'
    ])

我的Bower索引页面(index.html)：

<!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
    <script src="bower_components/angular-ui-utils/ui-utils.js"></script>
    <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <script src="bower_components/angular-underscore/angular-underscore.js"></script>
    <!-- endbower -->

我的问题出在哪里？

- Maksim Borodov

---

看起来你没有引入 Highcharts 的脚本，只有指令。 - Ben Felda

除了 highcharts-ng.js 之外，您还需要加载 highcharts.js 库。 - Sebastian Bochan

Answer 1

高级图表-ng依赖于Hightcharts，因此您需要同时安装它们两个。

bower install --save highcharts
bower install --save highcharts-ng

- Bernard

Answer 2

我遇到了完全相同的问题。我认为答案在文档中。请查看 Git hub 文档（Git hub documentation）。

我找到了解决办法。将下面的脚本标签插入到高级图表脚本 highcharts-ng.js 的上方。

<script src="http://code.highcharts.com/highcharts.src.js"></script> <script src="bower_components/highcharts-ng/src/highcharts-ng.js"></script>

这样就可以消除错误信息。

- Shashank Reddy Arrabothu

---

更准确地说，是bower和<script src="http://code.highcharts.com/stock/4.2.2/highstock.js"></script>。 - Watchmaker

Answer 3

通过 bower.json，还有一种方法可以实现这一点；更新以下依赖项。

"highcharts" : "*",
"highcharts-ng" : "*"

请在命令行项目目录中运行bower update。

使用“highcharts-ng模块”。

var myApp = angular.module('myApp',
[
    "highcharts-ng",
    "ngRoute",
    "myApp.view1",
    "myApp.view2",
    "myApp.version"
]);

在index.html或视图中包含以下内容。

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>

- Gajen Sunthara

Answer 4

下载 highcharts.js 并在您的应用程序中链接它。您只需要使用 Angular 指令 highcharts-ng。

- Adrian Enriquez

---

我曾经遇到过同样的问题，这个方法对我有用：添加：<script src="http://code.highcharts.com/highcharts.js"></script> - user264230

Answer 5

看起来 highcharts.js 依赖于 jQuery。请验证 jQuery 是否正确加载并且是正确的版本。

- mwilson

---

Jquery加载正确的https://www.dropbox.com/s/ngmc0szcwoovaoc/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-05-28%2001.33.15.png。 - Maksim Borodov