带有flot和AJAX导航的jQuery Mobile

Question

我试图在jQuery Mobile项目中显示一个flot生成的图表.如果我通过它的绝对路径调用jQuery Mobile的页面(某事喜欢:http://server.com/graph/fancy.php)一切工作正常,但只要我开始使用JQM集成AJAX导航图表看起来炒.

我还发现了另一个主题jquery mobile和flot库,但是所描述的解决方案都没有对我有用.

有没有办法让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>

Answer 1

您需要做的是将绘图功能移动到pageshow事件中.这是因为flot在不可见的占位符中不能很好地工作.试试这样:

$('#graph').bind('pageshow', function() {
    var plot = $.plot($("#chart"), [
        {
        label: "Oh hai",
        data: data,
        bars: {
            show: true
        }}
    ]);
});

在这里采取行动:http: //jsfiddle.net/MT22y/8/