javascript - 尝试添加新图表时，Highcharts 说未定义不是函数

Question

我正在尝试将 highcharts 放入我的 Angular 应用程序中。我正在从 Google 表格中获取我的数据，并通过对 google 的调用返回一个 promise 对象。然后我用我的选项对象调用 Highcharts.Chart() 方法。

我在调用电话时收到以下错误。我试图弄清楚发生了什么，但我现在迷路了。我有一个不使用 Angular 原型(prototype)，图表效果很好。当我去添加行 new Highcharts.Chart(options) 时，我收到以下错误。我删除了那一行，错误消失了。

任何想法/帮助都会很棒!

错误:

TypeError: undefined is not a function
    at Object.Chart.init (/highcharts.src.js:11014:4)
    at Object.Chart (/highcharts.src.js:10937:12)
    at data.then.$scope.sheetdata (/js/controllers/controlChartCtrl.js:11:17)
    at wrappedCallback (/angularjs/1.2.6/angular.js:10905:81)
    at /angularjs/1.2.6/angular.js:10991:26
    at Scope.$eval (/angularjs/1.2.6/angular.js:11906:28)
    at Scope.$digest (/angularjs/1.2.6/angular.js:11734:31)
    at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
    at /angularjs/1.2.6/angular.js:11945:26
    at completeOutstandingRequest (/angularjs/1.2.6/angular.js:4098:10) 

部分:

Features:
<div id="feature"></div>

Controller :

angular.module('controlChartCtrl', []).
  controller('ControlChartCtrl', ['$scope', 'GoogleService', function($scope, GoogleService) {
    var data = GoogleService.getData();
    $scope.helloworld = "hello world!";
    data.then(function (data) {
        // create charts here
        var options = getOptionsForChart('Feature', 'feature', data);
        var chart = new Highcharts.Chart(options);
    }, function (error) {
        $scope.sheetdata = error;
    });

    var getOptionsForChart = function (title, div, data) {
        return {
            chart: {
                renderTo: div,
                type: 'line'
            },
            title: {
                text: title + ' Control Chart'
            },
            xAxis: {
                title: {
                    text: 'End Dates'
                },
                categories: data.endDates
            },
            yAxis: {
                title: {
                    text: 'Lead Time'
                }
            },
            series: [{
                name: 'Lead Time',
                data: data.leadTimes
            }]
        };
    } 

}]);

Answer 1

我解决了这个问题。解决方法如下。

Highcharts 需要 jQuery 才能正常运行。当我在 highcharts.js 文件上方添加 jquery.js 文件时， Angular 应用程序开始正常工作。

感谢反馈!