带有flot和AJAX导航的jQuery Mobile

发布时间：2020-12-16 01:36:21 所属栏目：百科来源：网络整理

导读：我试图在jQuery Mobile项目中显示一个flot生成的图表. 如果我按照绝对路径调用jQuery Mobile页面(例如： http://server.com/graph/fancy.php),一切正常,但是一旦我开始使用jQM集成的AJAx导航,图表就会变得混乱. 我还发现了另一个话题jquery mobile and flot

我试图在jQuery Mobile项目中显示一个flot生成的图表.
如果我按照绝对路径调用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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!