Android WebView 中的定位和平移/缩放 Flot 图表

Question

我正在开发一个 Android 项目，其中有一个在 Flot 图表中运行="http://phonegap.com/" rel="nofollow">PhoneGap。以下是我的 HTML 页面的设置方式，布局由 jQuery Mobile 处理：

• Flot "placeholder" div
• 包含自定义的 div允许操作图表的按钮
• 表单

以下是我遇到的问题：

• 如何动态调整 Flot 图表的大小以适应屏幕上的可用空间？ 现在，我将图表设置为静态大小，但我希望能够确定屏幕的尺寸（在陆地空间模式下），并将图表宽度设置为该尺寸。
• 如何启用图表的平移和缩放？ 我的应用程序在标准桌面浏览器中运行时支持该功能 - 在那里，我通过单击并拖动图表来平移，并通过旋转我的图表来缩放将鼠标滚轮放在图表上。当我在 Android 模拟器中尝试这些操作时，要么整个应用程序被平移（不仅仅是图表），要么什么也没有发生（鼠标滚轮在模拟器中不执行任何操作）。如何仅平移和缩放图表本身，而不是整个应用程序？

Answer 1

1）
只需创建一个容器div，样式宽度：100%
当方向改变时，您可以通过添加 PhoneGap 事件侦听器来重绘图形：

$(window).bind('orientationchange', function(event) {
    $.plot($(graphId), .....
});

可以通过调用来调整图形大小，而不是重新初始化图形：

plot.resize();
plot.setupGrid();
plot.draw();

这也可能表现得稍好一些。

如果您在重绘之前遇到图形未正确清除的情况，您可以使用强制清除：

$(graphId).text('');

当图形位于 data-role=content 的 div 内时，我遇到了问题，只需删除 data-role 即可。