JavaScript运行时错误:对象不支持Visual Studio中的属性或方法“highcharts”
JavaScript运行时错误:对象不支持Visual Studio中的属性或方法“highcharts”
提问于 2014-01-28 16:10:17
您好，我是JQuery和Highcharts的初学者，在Visual Studio2013中按照Highcharts文档创建第一个图表时，遇到了花费超过3-4个小时无法解决的问题。
我创建了一个barebone ASP MVC5应用程序，并将以下代码添加到Index.cshtml body中：
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="width:100%; height:400px;"></div>然后，我将以下代码添加到_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>它输出html代码，立即使从Visual Studio启动IE浏览器崩溃，给我错误消息: JavaScript运行时错误: Object不支持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>但是，如果我将其复制并粘贴到静态html文件中，然后打开浏览器从我的桌面脱机查看它，则图表可以正常工作。
请帮帮我！我已经花了几个小时尝试不同的东西来解决这个问题！谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-28 16:12:41
您包含了两次jQuery。在标题中：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>在页面的底部：
<script src="/Scripts/jquery-1.10.2.js"></script>第二个包含项将覆盖附加Highcharts的第一个包含项。也就是说，在文档就绪回调中，$引用了没有添加Highcharts的jquery-1.10.2.js。
您实际上包含了两个库，jQuery和Highcharts。别干那事。
Stack Overflow用户
发布于 2016-04-14 21:34:08
为了防止这对任何人有帮助，我在使用AngularJS时发生了这种情况，并且错误地使用了一个自动关闭的ng-view标记。Angular最终加载了两次，因此如果相关，请确保您的ng-view标记是
<ng-view></ng-view> 而不是
<ng-view/>花了一段时间才弄明白，希望这能节省别人的时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21400089
复制相关文章
相似问题
腾讯云开发者
