我有一个静态页面，它使用 jqplot 显示一个简单的条形图，当我将该代码放入 Rails 视图时，它不显示任何内容。
- javascript 确实被调用了，因为如果我将警报扔到 showGraph() 函数中，它会在页面加载时显示。
- 服务器不会抱怨找不到 javascript 或 CSS。
- 如果我将 Rails 生成的代码放入公用文件夹中以使其静态显示，则图表不会显示。
- 但是，如果我在页脚中取出包含 "script src="/assets/jquery.js?body=1" type="text/javascript"" 的行，那么图表就会显示
- 如果我改为删除 jqplot 包含之前对 jquery.min.js 的调用，则行为没有区别。
编辑： 6. 更多的胡闹表明，如果我在包含 jquery.jqplot.min.js 之后的任何时间包含 jquery.js，则该图表不会出现。
是否可以在不弄乱页脚的情况下显示此图表？有没有一种我应该知道的行之有效的方法来正确地做到这一点？
这是 Rails 生成的 HTML，减去了一些不影响我正在谈论的行为的内容：
<!DOCTYPE html>
<html>
<head>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="">
<!-- Le styles -->
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<!--<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">-->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="/images/favicon.ico" />
<style type="text/css">
.navbar .brand {
//float: right;
padding-bottom: 6px;
padding-top: 6px;
//font-weight: 400;
}
.hero-unit h1 {
//font-size:48px;
}
.hero-unit p {
//font-size:24px;
padding-top:12px;
}
.navbar .nav > li > a {
line-height: 72px;
padding-left: 15px;
padding-right: 15px;
font-size: 18px;
}
</style>
<style type="text/css">
body {
padding-top: 120px;
padding-bottom: 40px;
font-size: 14px;
}
footer {
font-size:12px;
}
legend {margin-bottom: 10px;}
</style>
<style>
table.cleanlink td a {text-decoration:none; color:inherit; display:block; padding:0px; height:100%;}
table.cleanlink td a:hover {text-decoration:none; color:inherit;}
div.data-scroller {width:910px; max-height:400px; overflow:scroll;}
</style>
<style>
ul.nav li.dropdown:hover ul.dropdown-menu {display: block;}
ul.nav li.dropdown ul.dropdown-menu {margin-top: 0px;}
//a.menu:after, .dropdown-toggle:after {content: none;}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/home"><img src="/images/B4-l-s-m-h-i-2-273x80.png" /></a>
<ul class="nav">
</ul> <ul class="nav pull-right">
<li class="dropdown">
<a href="/account" class="dropdown-toggle" data-toggle="dropdown">My Account</a>
<ul class="dropdown-menu pull-right">
<!--<li class="divider"></li>-->
<li><a href="/signout" data-method="delete" rel="nofollow">Sign out</a></li>
</ul>
</li></ul> </div>
</div>
</div>
<div class="container">
<html>
<script language="javascript" type="text/javascript" src="/assets/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/assets/jquery.jqplot.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="/assets/src/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="/assets/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="/assets/src/plugins/jqplot.pointLabels.min.js"></script>
<script>
function showGraph() {
var s1 = [20, 3, 2, 1];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var xticks = ['A', 'B', 'C', 'D'];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true, location: 'n', edgeTolerance: -15 },
rendererOptions: {fillToZero: true}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {formatString: '%d'}
}
}
});
};
$(document).ready(showGraph);
</script>
<div id="chart1" style="height:400px;width:600px; "></div>
</html>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
</body>
</html>