Диаграммы jQPlot не работают в jquery mobile всплывающих
У меня есть линейный график с использованием 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>
Появляется всплывающее окно, но без диаграммы. Что я делаю не так???
1 ответ
Решение
Все плагины jQuery, которые работают с высотой и шириной страницы (в вашем случае jqPlot), ДОЛЖНЫ быть инициализированы с помощью события pagehow или в любой другой точке, где страница уже отображается, в нашем случае это событие 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>