我试图在jQuery Mobile项目中显示一个flot生成的图表.
如果我按照绝对路径调用jQuery Mobile页面(例如： http://server.com/graph/fancy.php),一切正常,但是一旦我开始使用jQM集成的AJAx导航,图表就会变得混乱.
如果我按照绝对路径调用jQuery Mobile页面(例如： http://server.com/graph/fancy.php),一切正常,但是一旦我开始使用jQM集成的AJAx导航,图表就会变得混乱.
我还发现了另一个话题jquery mobile and flot library,但所描述的解决方案都没有对我有用.
有没有办法让jQM和flot一起工作？不幸的是,禁用AJAX也不是一种选择.
图表生成：
<script type="text/javascript">
var data = [[0,3],[4,8],[8,5],[9,13]];
$(function () {
var plot = $.plot($("#chart"),[
{
label: "Oh hai",data: data,bars: { show: true }
}
]);
});
</script>
<div id="chart" style="width: 600px; height: 350px;"></div>
您需要做的是将绘图功能移动到pageshow事件中.这是因为flot在不可见的占位符中不能很好地工作.试试这样：
$('#graph').bind('pageshow',function() {
var plot = $.plot($("#chart"),[
{
label: "Oh hai",bars: {
show: true
}}
]);
});
在这里采取行动：http://jsfiddle.net/MT22y/8/
