Javascript Highcharts :Uncaught TypeError: $(...).highcharts 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32011248/
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 :Uncaught TypeError: $(...).highcharts is not a function
提问by Anil Kumar
Getting this error while running a HighCharts in my JSP Application.
在我的 JSP 应用程序中运行 HighCharts 时出现此错误。
Uncaught TypeError: $(...).highcharts is not a function(anonymous function) @ VendorReports:125n.Callbacks.j @ jquery-1.11.0.js:893n.Callbacks.k.fireWith @ jquery-1.11.0.js:928n.extend.ready @ jquery-1.11.0.js:982K @ jquery-1.11.0.js:989
Please suggest what to do
请建议该怎么做
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
$(function () {
$('#container').highcharts({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples' ]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
//Nothing wrong with this code
回答by ved prakash Saini
I was having this issue, too. Ensure jQuery is imported before highchart.js. That fixed the issue for me.
我也遇到了这个问题。确保在 highchart.js 之前导入 jQuery。那为我解决了这个问题。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
回答by Kabulan0lak
What happens if you replace
如果更换会发生什么
$('#container').highcharts({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column'
},
/* ... */
by
经过
var chart = new Highcharts.Chart({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column',
renderTo: 'container'
},
/* ... */
?
?
I had the same issue as you a while ago and I resolved it by using this type of initialization.
不久前我遇到了与您相同的问题，我通过使用这种类型的初始化解决了它。
回答by odyth
I was using an old version of the high charts version. From their website I assumed that the version listed under Specific version was their latest version and used that so it wouldn't auto update on me. However the version they had listed was super old so changing it to the actual latest version fixed the issue.
我使用的是旧版本的高图表版本。从他们的网站上，我假设特定版本下列出的版本是他们的最新版本并使用它，所以它不会自动更新我。但是，他们列出的版本非常旧，因此将其更改为实际的最新版本可以解决问题。
回答by Zanoldor
It happens with me too. In my case, I need click in a button to load the chart and if I click twice or more the chart stops to work. I was setting the color like this:
它也发生在我身上。就我而言，我需要单击一个按钮来加载图表，如果我单击两次或多次，图表就会停止工作。我是这样设置颜色的：
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
})
});
$.getJSON("./myDataGraph.php", function(response){
// Create the chart
var chart = Highcharts.chart('myGraph', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
... });
I couldn't solve the error, but I remove the "Highcharts.setOptions" and the chart works!!!
我无法解决错误，但我删除了“Highcharts.setOptions”并且图表可以工作！！！
回答by baris1892
The approach taken from the official examples is working well. They defined the include script tag within the body tag therefore the solution given by Kabulan0lak is better I think.
从官方示例中采用的方法运行良好。他们在 body 标签中定义了包含脚本标签，因此我认为 Kabulan0lak 给出的解决方案更好。
<html>
<head>
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
}
// ... other options and data/series
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
