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/

Answer 2

我认为你最好只是覆盖图元素的样式。例如，我通过添加填充http://jsfiddle.net/MT22y/7/将图形移到侧面，以便它不再覆盖轴。

您可能需要稍微使用样式和宽度，但这可能是最简单的方法。

带有flot和AJAX导航的jQuery Mobile

2 个答案: