我想用MVC4测试这个例子
<html>
<head>
<title>Beautiful Analytics Chart</title>
<script type='text/javascript' src='js/lib/prototype.js'></script>
<script type='text/javascript' src='js/lib/raphael.js'></script>
<script type='text/javascript' src='js/analytics.js'></script>
</head>
<body>
<div id='line-chart-holder'></div>
<table id="d1" style='display: none;'>
<tfoot>
<tr>
<th>3/02</th>
<th>3/03</th>
<th>3/09</th>
<th>3/16</th>
</tr>
</tfoot>
<tbody class='data'>
<tr>
<td>70</td>
<td>70</td>
<td>210</td>
<td>490</td>
</tr>
</tbody>
<tbody class='line1'>
<tr>
<td>70 Views</td>
<td>70 Views</td>
<td>210 Views</td>
<td>490 Views</td>
</tr>
</tbody>
<tbody class='line2'>
<tr>
<td>Mar 2nd 2011</td>
<td>Mar 3rd 2011</td>
<td>Mar 9th 2011</td>
<td>Mar 16th 2011</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
Element.observe(window,'load', function(){
var w = 840; // you can make this dynamic so it fits as you would like
var linechart = Raphael('line-chart', w, 250); // init the raphael obj and give it a width plus height
drawLine({ // call the drawLine function
holder: linechart, // pass through the raphael obj
data_holder: 'd2', // find the table data source by id
mastercolor: '#01A8F0', // set the line color
spewidth: w, // pass in the same width
showarea: true, // show the area
mousecoords: 'rect' // rect (uses blanket mode) | circle (pinpoints the points)
});
});
</script>
</body>
</html>
我从http://joedesigns.com/labs/Beautiful-Analytics-Chart/获取此示例。 当使用Asp.net MVC4时，它不会生成svm，但是如果我使用任何html编辑器并执行它可以工作。
我使用nuget包添加了raphae.js，但在Script文件夹中添加了prototype.js和analytics.js。
为什么它没有工作？
这是我的布局视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script type='text/javascript' src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type='text/javascript' src="~/Scripts/jquery.validate.min.js"></script>
<script type='text/javascript' src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type='text/javascript' src="~/Scripts/prototype.js"></script>
<script type='text/javascript' src="~/Scripts/raphael-min.js"></script>
<script type='text/javascript' src="~/Scripts/analytics.js"></script>
<script type='text/javascript'>
Element.observe(window, 'load', function () {
var w = 840; // you can make this dynamic so it fits as you would like
var linechart = Raphael('line-chart-holder', w, 250); // init the raphael obj and give it a width plus height
drawLine({ // call the drawLine function
holder: linechart, // pass through the raphael obj
data_holder: 'd1', // find the table data source by id
mastercolor: '#01A8F0', // set the line color
spewidth: w, // pass in the same width
showarea: true, // show the area
mousecoords: 'rect' // rect (uses blanket mode) | circle (pinpoints the points)
});
});
</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>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
和我的索引视图
@{
ViewBag.Title = "Home Page";
}
<div id='line-chart-holder'></div>
<table id="d1" style='display: none;'>
<tfoot>
<tr>
<th>3/02</th>
<th>3/03</th>
<th>3/09</th>
<th>3/16</th>
</tr>
</tfoot>
<tbody class='data'>
<tr>
<td>70</td>
<td>70</td>
<td>210</td>
<td>490</td>
</tr>
</tbody>
<tbody class='line1'>
<tr>
<td>70 Views</td>
<td>70 Views</td>
<td>210 Views</td>
<td>490 Views</td>
</tr>
</tbody>
<tbody class='line2'>
<tr>
<td>Mar 2nd 2011</td>
<td>Mar 3rd 2011</td>
<td>Mar 9th 2011</td>
<td>Mar 16th 2011</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
我找到了解决问题的方法。虽然我想了解为什么当我添加analytic.js脚本文件夹并在标题中引用时不起作用？
我的问题的解决方案是将analytic.js的代码放在我的索引视图中
@{
ViewBag.Title = "Home Page";
}
<div id='line-chart-holder'></div>
<table id="d1" style='display: none;'>
<tfoot>
<tr>
<th>3/02</th>
<th>3/03</th>
<th>3/09</th>
<th>3/16</th>
</tr>
</tfoot>
<tbody class='data'>
<tr>
<td>70</td>
<td>70</td>
<td>210</td>
<td>490</td>
</tr>
</tbody>
<tbody class='line1'>
<tr>
<td>70 Views</td>
<td>70 Views</td>
<td>210 Views</td>
<td>490 Views</td>
</tr>
</tbody>
<tbody class='line2'>
<tr>
<td>Mar 2nd 2011</td>
<td>Mar 3rd 2011</td>
<td>Mar 9th 2011</td>
<td>Mar 16th 2011</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
....///Code of analytic.js////// http://joedesigns.com/labs/Beautiful-Analytics-Chart/js/analytics.js
</script>