我有一个使用 jQPlot 的折线图需要在点击 jQuery 移动 pop-up 后显示。不幸的是,它没有显示出来.. 下面是我的代码。
弹窗出现了,但是没有图表。我做错了什么吗?
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link class="include" rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.css" />
<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img src="downarrow_Green.svg" onclick="openpopup()"/>
<div id="mychartshow" style="height:150px; width:150px;"></div>
<div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">
<div class="ui-grid-d">
<div class="ui-block-a" align="left">
<span>1y</span>
</div>
<div class="ui-block-b" align="left">
<span>6m</span>
</div>
<div class="ui-block-c" align="left">
<span>3m</span>
</div>
<div class="ui-block-d" align="left">
<span>1m</span>
</div>
<div class="ui-block-e" align="left">
<span>1w</span>
</div>
</div>
<!--Graph Section-->
<div id="mychartshow">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
//var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
title : 'US Dollar',
axes : {
xaxis : {
ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
},
yaxis : {
ticks : [2.8, 3.0, 3.2, 3.4, 3.6]
}
}
});
});
function openpopup() {
$('#ExchangeRate_graph').popup('open');
}
</script>
</div><!--page-->
</body>
</html>
弹窗出现了,但是没有图表。我做错了什么吗?