如标题所述，我现在正在尝试使用 Google 可视化创建图表：带注释的时间线。它非常容易使用，文档也很容易理解。您可以在此处找到文档。
我遇到了关于图表 wmode 的问题，该图表是一个 flash 对象。
图表的 wmode 的默认值为“window”，它将始终覆盖同一页面中的所有 HTML 对象。这非常烦人，因为即使 jquery block() 方法也不起作用。
当我将图表的 wmode 更改为“不透明”或“透明”时，图表不会覆盖具有较高 z-index 的 HTML 对象，但它无法识别鼠标滚动事件。但它仍然捕获鼠标单击事件。
我在以下浏览器中尝试过：
- Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 (.NET CLR 3.5.30729)
- Opera/9.80 (Windows NT 5.2; U; en) Presto/2.7.62 Version/11.00
- Safari 4.0.5 (531.22.7)
- IE 7.0.5730.13
只有IE可以捕捉到鼠标滚动，其他的无法识别。
有人遇到和我一样的问题吗？或者有人没有遇到这个问题吗？
我一直在通过互联网寻找解决方案，但没有任何解决方案适合我。
任何解决方案（或解决方法）将不胜感激。
多谢。
As stated in the title, I am now trying to create a chart using Google visualization: annotated time line. It's very easy to use and the documentation is fairly easy to understand as well. You can find the documentation here.
I run into a problem about the wmode of the chart which is a flash object.
The default value of the chart's wmode is "window" and it will always overlay all HTML objects in the same page. That is very annoying, because even the jquery block() method doesn't work on it.
When I change the chart's wmode into "opaque" or "transparent" the chart will not overlay HTML objects with higher z-index, but it doesn't recognize the mouse scroll event. It still catch the mouse click event though.
I have tried it in the following browser:
- Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 (.NET CLR 3.5.30729)
- Opera/9.80 (Windows NT 5.2; U; en) Presto/2.7.62 Version/11.00
- Safari 4.0.5 (531.22.7)
- IE 7.0.5730.13
Only the IE can catch the mouse scroll even, the others couldn't recognize it.
Is anyone experiencing the same problem as me? or is anyone not experiencing that problem?
I've been looking for the solution over the internet and no solutions is working for me.
Any solutions (or work around) would be appreciated.
Thanks a lot.
发布评论
评论（1）
由于似乎没有人有解决方案，我决定回答我自己的问题，以防有人遇到与我相同的问题，:)
好吧，我实际上还不知道解决方案，但我找到了解决方法。 :p
首先，我将图表的 wmode 设置为“不透明”。
然后，按照 jpea 的建议，我使用 javascript 鼠标滚轮事件侦听器来处理 div 元素中的鼠标滚轮事件图表所在的位置。
然后，使用 setVisibleChartRange() 方法将从事件获取的增量值用于更改图表的可见范围。
请参阅此处了解如何在不同浏览器中使用鼠标滚轮事件。
我希望这个答案是有用的，：D
注意：如果您确定图表不会被任何对象重叠，那么您不需要对 wmode 执行任何操作。
Since no one seems to have the solution, I decided to answer my own question in case someone run into the same problem as me, :)
Well I actually don't know the solution for it yet, but I found a work around. :p
First, I set the wmode of the chart into 'opaque'.
Then, following the advice from jpea, I used the javascript mouse wheel event listener to handle the mouse wheel event in the div element where the chart resides.
The delta value obtained from the event is then used to change the chart's visible range using setVisibleChartRange() method.
See here to find out how to use the mouse wheel event in different browsers.
I hope this answer is useful, :D
Note: If you sure the chart would not be overlapped by any objects by any chance, then you don't need to do anything about the wmode.