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

Question

我正在开发一个Android项目，我有一个Flot图表，在PhoneGap中运行。以下是我的HTML页面设置方式，布局由jQuery Mobile处理：

• Flot“placeholder”div
• 包含可以操作图表的自定义按钮的div
• 表格

以下是我遇到的问题：

• 如何动态调整Flot图表的大小以适应屏幕上的可用空间？现在，我将图表设置为静态大小，但我更愿意确定屏幕大小（在LANDpace模式下），并将图表宽度设置为。
• 如何启用图表的平移和缩放？我的应用在标准桌面浏览器中运行时支持该功能 - 在那里，我点击并拖动图表，然后我缩放通过在图表上旋转我的鼠标滚轮。当我在Android模拟器中尝试这些东西时，要么整个应用程序被淘选（不仅仅是图表），要么没有任何反应（鼠标滚轮在模拟器中没有做任何事情）。如何平移和缩放图表本身，而不是整个应用程序？

Answer 1

1） 只需创建一个样式宽度为100％的容器div 通过添加PhoneGap eventlistener：

，可以在方向更改时重绘图形

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

通过调用：

，而不是重新初始化图形可以调整大小

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

这也可能稍微好一些。

如果您在重绘之前遇到图形未正确清除，则可以使用以下方法强行清除：

$(graphId).text('');

当图表位于具有data-role = content的div内时，我遇到了问题，只需删除数据角色。