带有浮点和 AJAX 导航的 jQuery Mobile答案

【问题标题】：jQuery Mobile with flot and AJAX navigation带有浮点和 AJAX 导航的 jQuery Mobile
【发布时间】：2011-06-16 09:53:19
【问题描述】：

我正在尝试在 jQuery Mobile 项目中显示浮点生成的图表。如果我通过其绝对路径调用 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>

【问题讨论】：

你能在jsfiddle.net上发布一个例子吗？
给你：jsfiddle.net/MT22y/5 请注意，在我的应用程序中，图形页面实际上是在一个单独的文件中，但无论如何都会出现错误（注意 y 轴）

标签： jquery ajax jquery-mobile flot

【解决方案1】：

您需要做的是将您的绘图功能移动到pageshow 事件中。这是因为 flot 在不可见的占位符中效果不佳。试试这样：

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

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

【讨论】：

不错的答案，我不知道。

【解决方案2】：

我认为您最好只覆盖图形元素的样式。例如，我通过添加填充将图形移到一边：http://jsfiddle.net/MT22y/7/，使其不再覆盖轴。

您可能需要稍微调整一下样式和宽度，但这可能是最简单的方法。

【讨论】：