jQuery Mobile与flot和AJAX导航

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>

- Max

---

请问你能否在http://jsfiddle.net/上发布一个示例？ - Jivings

请注意，在我的应用程序中，图表页面实际上是在一个单独的文件中，但错误仍然会显示出来（请注意y轴）。这是链接：http://jsfiddle.net/MT22y/5/ - Max

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/

- Ryley

Answer 2

我认为最好的方法是覆盖图形元素的样式。例如，我通过添加padding: http://jsfiddle.net/MT22y/7/ 将图形移动到侧面，这样它就不会再遮盖轴了。

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

- Jivings