带有 flot 和 AJAX 导航的 jQuery Mobile
我正在尝试在 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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

您需要做的是将绘图函数移至
pageshow
事件中。这是因为 flot 在不可见的占位符中不能很好地工作。尝试这样:在此处操作: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:In action here: http://jsfiddle.net/MT22y/8/