在同一个html页面中我需要使用jquerymobile(www.jquerymobile.com)并使用jqplot js库(www.jqplot.com)绘制一个简单的图表。
我认为jqplot和jquerymobile之间存在冲突问题,因为没有显示图表。但是,如果我评论jquerymobile脚本,图表就会变得可见。
这是我的HTML代码的一部分:
[...head...]
<link rel="stylesheet" type="text/css" href="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.css" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
[...script...]
$(document).ready(function () {
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
[...body...]
<div class="jqplot" id="chart1" style="height:300px;width:400px;"></div>
任何克服冲突的建议?也许我想念一些东西?
提前致谢, 微米。
答案 0 :(得分:2)
是一个常见问题,解决方法是错误的......
不要使用jquerymobile准备好文档,请使用pageInit()
在jquery论坛中找到了这个帖子,它的工作原理是静态数据但是我从来没有让它在jquerymobile上使用json调用jqplot。
http://forum.jquery.com/topic/ajax-problem-jquery-mobile-with-jqplot
祝你好运!答案 1 :(得分:1)
我喜欢jqplot,与jqmobile一起使用试试这个:
<script>
$('#thirdpage').live('pageshow', function() {
$.jqplot('chart1', [[[1, 4],[3,7.10],[5,6],[7,3],[9,95.9],[121,416]]]);
});
</script>
<!-- Page Three -->
<section id="thirdpage" data-role="page">
<header data-role="header">
<h1>Charts</h1>
</header>
<div data-role="content">
<a href="#firstpage" id="firstpage">PageOne</a>
<a href="#secondpagepage" id="secondpage">Page2</a>
<div id="chart1" style="height:300px; width:500px;"></div>
</div>
</section>
答案 2 :(得分:1)
有一种更简单的方式(在我的情况下有效):
- 优先:在任何页面之外(例如 body 标记下方)绘制容器div :
<body>
<div id="plotContainer"></div>
...
- 然后:在 $(文档).ready(function(){... 此处 ...}中设置图表(图表) ); 并隐藏它,使其不会在页面之间显示:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
- finaly:只需在页面内复制div:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
希望这有帮助!!!