JavaScript 运行时错误：对象不支持 Visual Studio 中的属性或方法“highcharts”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21400089/
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
JavaScript runtime error: Object doesn't support property or method 'highcharts' in Visual Studio
提问by user2952473
Hi I am a beginner to JQuery and Highcharts and running into problems I can't solve spending over 3-4 hours on it while following Highcharts documentation to create the first chart in Visual Studio 2013.
嗨，我是 JQuery 和 Highcharts 的初学者，遇到了一些问题，我在遵循 Highcharts 文档以在 Visual Studio 2013 中创建第一个图表时花费了 3-4 个小时无法解决。
I create a barebone ASP MVC 5 application and add the following code to Index.cshtml body:
我创建了一个准系统 ASP MVC 5 应用程序并将以下代码添加到 Index.cshtml 正文：
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="width:100%; height:400px;"></div>
Then I add the following code to _Layout.cshtml:
然后我将以下代码添加到 _Layout.cshtml：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
It output html code that immediate crash the IE browser launching from with Visual Studio, giving me error message: JavaScript runtime error: Object doesn't support property or method 'highcharts' in Visual Studio
它输出的 html 代码使从 Visual Studio 启动的 IE 浏览器立即崩溃，给我错误消息：JavaScript 运行时错误：对象不支持 Visual Studio 中的属性或方法“highcharts”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/Register" id="registerLink">Register</a></li>
<li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>Index</h2>
<div id="container1" style="width:100%; height:400px;"></div>
<p>
<a href="/BatteryLog/Create">Create New</a>
</p>
<table class="table">
<tr>
<th>
Voltage
</th>
<th>
Current
</th>
<th></th>
</tr>
<tr>
<td>
3.12
</td>
<td>
3.18
</td>
<td>
<a href="/BatteryLog/Edit/21">Edit</a> |
<a href="/BatteryLog/Details/21">Details</a> |
<a href="/BatteryLog/Delete/21">Delete</a>
</td>
</tr>
<tr>
<td>
3.124
</td>
<td>
6.28
</td>
<td>
<a href="/BatteryLog/Edit/22">Edit</a> |
<a href="/BatteryLog/Details/22">Details</a> |
<a href="/BatteryLog/Delete/22">Delete</a>
</td>
</tr>
</table>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
//<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"bab8eaa5834742c0a90d4a2266b8953c"}
</script>
<script type="text/javascript" src="http://localhost:19978/19d3f54454e64aa2aeab6fa68d1e8a88/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
However, if I copy and paste this into an static html file and open browser to view it offline from my desktop, then the charts works.
但是，如果我将其复制并粘贴到静态 html 文件中并打开浏览器以从我的桌面离线查看它，则图表可以正常工作。
Please help! I spent hours already trying out different things to solve this! Thank you!
请帮忙！我已经花了几个小时尝试不同的方法来解决这个问题！谢谢！
回答by Felix Kling
You are including jQuery twice. In the header:
您两次包含 jQuery。在标题中：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
and at the bottom of the page:
并在页面底部：
<script src="/Scripts/jquery-1.10.2.js"></script>
This second inclusion will overwrite the first one, where Highcharts was attached to. I.e. inside the document ready callback, $refers to jquery-1.10.2.js, which doesn't have Highcharts added to it.
第二个包含将覆盖第一个，其中附加了 Highcharts。即在文档就绪回调中，$指的是jquery-1.10.2.js，其中没有添加 Highcharts。
You are actually including both libraries, jQuery and Highcharts twice. Don't do that.
您实际上同时包含了两个库，jQuery 和 Highcharts。不要那样做。
回答by Nathan Murados
Just in case this helps anyone, this was happening for me when I was using AngularJS and mistakenly, a self closing ng-view tag. Angular ended up loading twice so if relevant ensure your ng-view tag is
以防万一这对任何人有帮助，当我使用 AngularJS 时，我错误地使用了一个自关闭的 ng-view 标签。Angular 最终加载了两次，因此如果相关，请确保您的 ng-view 标签是
<ng-view></ng-view>
instead of
代替
<ng-view/>
Took a while to figure out, hopefully it will save somebody else time.
花了一段时间才弄明白，希望它能节省别人的时间。
