我有一个使用jQPlot的折线图，需要在点击jquery移动弹出窗口时显示。不幸的是它没有出现..下面是我的代码。
<!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>
弹出窗口显示但没有图表。我做错了什么？
答案 0 :(得分：7)
所有使用页面高度和宽度的jQuery插件（在你的情况下是jqPlot）必须通过pageshow事件或在已经显示页面的任何其他点初始化，在我们的例子中这是一个popupbeforeopen事件。这是因为jQuery Mobile页面仅在此时具有正确的高度。因此，如果页面高度为0，则插件将初始化，但高度设置为0。
只需将此HTML复制到一个空的html文件中即可尝试。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script>
$(document).on('pageshow', '#graph-page', function(){
$(document).on( "popupafteropen", "#ExchangeRate_graph",function( event, ui ) {
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]
}
}
});
});
});
</script>
</head>
<body>
<div data-role="page" id="graph-page">
<div data-role="content">
<a href="#ExchangeRate_graph" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">
<!--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>