带有 flot 和 AJAX 导航的 jQuery Mobile

Question

我正在尝试在 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>

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/