Question

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

我不明白高阶图的角度如何。

我使用这个lib：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的Web检查器对其进行调试。对我来说，当我遇到同样的错误时，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

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

3 个答案: