带有 flot 和 AJAX 导航的 jQuery Mobile

发布于 2024-11-15 17:22:25 字数 812 浏览 0 评论 0原文

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

原文

I am trying to display a flot generated chart in a jQuery Mobile project.
If I call the jQuery Mobile page by its absolute path (sth. like: http://server.com/graph/fancy.php) everything works fine, but as soon as I start using the jQM integrated AJAx navigation the chart looks scrambled.

I also found this other topic jquery mobile and flot library, but none of the described solutions do work for me.

Is there a way to get jQM and flot working together? Unfortunatelly disabling AJAX is also not an option.

The chart generation:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴随着你 2024-11-22 17:22:25

您需要做的是将绘图函数移至 pageshow 事件中。这是因为 flot 在不可见的占位符中不能很好地工作。尝试这样：

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

在此处操作：http://jsfiddle.net/MT22y/8/

What you need to do is move your plot function into a pageshow event. This is because flot doesn't work well within placeholders that are not visible. Try it like this:

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

In action here: http://jsfiddle.net/MT22y/8/

回复收藏 0 原文