具有角度和离子框架错误的高图

Question

我想在我的网络应用上制作图表。

我不明白 angular 与 highcharts 的工作原理。

我使用这个库：github.com/pablojim/highcharts-ng 这个框架：ionicframework.com/

我认为它可以与 apache cordova 相同。

我做了一个简单的页面：

<highchart id="chart1" config="chartConfig"></highchart>

然后，在我的 app.js 上：

var app = angular.module('myApp', ['ionic', 'ui.router', 'highcharts-ng']);

然后在我的控制器 js 页面上：

angular.module('myApp').controller('Dashboard',....) 
{
    $scope.chartConfig = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    };

}

当然：没有图表，js 控制台出错：

TypeError: undefined is not a function
    at Object.Xa.init (http://localhost:63342/www/js/highcharts.js:190:242)
    at Object.Xa (http://localhost:63342/www/js/highcharts.js:15:293)
    at link.m (http://localhost:63342/www/js/highcharts-ng.min.js:8:2964)
    at link (http://localhost:63342/www/js/highcharts-ng.min.js:8:3058)
    at http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15996:44
    at nodeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15605:13)
    at compositeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15009:15)
    at nodeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15599:24)
    at compositeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15009:15)
    at compositeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15012:13) <div id="chart1" config="chartConfig"> 

我的问题：

• 如果我把依赖放在

  angular.module('myApp', ['highcharts-ng']).controller('Dashboard',....)
  

空白页，所以我假设它仅在 app.js 上......对还是错？

• 如何解决我的问题？

PS：对于 JSFiddle 或 CodePen 用户，这里是您的 graal： http://codepen.io/anon/pen/ateyI

不完全是我的项目，但重现了这个问题。 谢谢！

Answer 1

使用 chrome 的网络检查器对其进行调试。对我来说，当我遇到同样的错误时，addEvent 函数是罪魁祸首。检查定义让我意识到我忘记包含 jquery。我怀疑你的情况是一样的。

Answer 2

你是否包含了standalone-frameform.js？

<script src="lib/highcharts-release/adapters/standalone-framework.js"></script>

希望这会有所帮助。

Answer 3

弗拉德是对的。您需要包含standalone-framework.js。 此外，您不需要加载 Angular，因为 Ionic Bundle 包含它。

所以，脚本是：

<script src="http://code.ionicframework.com/1.0.0-beta.10/js/ionic.bundle.js"></script>
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>

这是您的 Codepen 的工作版本：http://codepen.io/anon/pen/VYrvvV