jqplot を使用して単純な棒グラフを表示する静的ページがあり、そのコードを Rails ビューにスローすると、何も表示されません。
- アラートを showGraph() 関数に投げると、ページの読み込み時に表示されるため、javascript が呼び出されます。
- サーバーは、javascript または CSS が見つからないことについて不平を言いません。
- Rails で生成されたコードを public フォルダーに入れて静的に表示すると、グラフが表示されません。
- しかし、フッターに「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>