javascript Highcharts 在尝试添加新图表时说 undefined 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21006462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts saying undefined is not a function when trying to add a new chart
提问by user3175030
I'm trying to put highcharts into my angular app. I'm getting my data from Google Sheets and returning a promise object from the call to google. I then call the Highcharts.Chart() method with my options object.
我正在尝试将 highcharts 放入我的 angular 应用程序中。我正在从 Google Sheets 获取我的数据并从对 google 的调用返回一个 promise 对象。然后我用我的选项对象调用 Highcharts.Chart() 方法。
I get the error below when making the call. I've tried to figure out what's going on but I am currently lost. I have a prototype that I do not use angular and the chart works great. When I go and add the line new Highcharts.Chart(options) I get the error below. I remove that line the error goes away.
拨打电话时出现以下错误。我试图弄清楚发生了什么，但我目前迷路了。我有一个不使用 angular 的原型，并且图表效果很好。当我去添加新的 Highcharts.Chart(options) 行时，我收到以下错误。我删除了该行，错误消失了。
Any thoughts/help would be great!
任何想法/帮助都会很棒！
Error:
错误：
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)
Partial:
部分的：
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
}]
};
}
}]);
回答by user3175030
I resolved the issue. The solution is as follows.
我解决了这个问题。解决方法如下。
Highcharts requires jQuery to function correctly. When I added the jquery.js file above the highcharts.js file the angular application started to work correctly.
Highcharts 需要 jQuery 才能正常运行。当我在 highcharts.js 文件上方添加 jquery.js 文件时，angular 应用程序开始正常工作。
Thanks for the feedback!
感谢您的反馈！
回答by mikemaccana
Highcharts does not require JQueryto work (the current answer is wrong), however you need to load the 'standalone framework' library first:
Highcharts不需要 JQuery工作（当前答案是错误的），但是您需要先加载“独立框架”库：
define([
'vnd/highcharts/standalone-framework',
'vnd/highcharts/highcharts',
], function(){
...
}
See @Sebastian's jsfiddle for a demo: http://jsfiddle.net/highcharts/aEuGP/
有关演示，请参阅 @Sebastian 的 jsfiddle：http: //jsfiddle.net/highcharts/aEuGP/
