我使用的是Google Annotated Timeline图表，鼠标滚轮缩放时间刻度非常烦人。我希望能够用滚轮向下滚动我的图表页面，但是时间轴图表正在拦截滚轮事件。它可以防止我向下滚动页面，并将我的时间轴缩放到一个不可用的范围。
我为你的问题写了一个解决方案。我已经将我的解决方案应用于谷歌的示例注释时间轴，此外，我还从这里使用了鼠标滚轮事件捕获技术。
重现问题:
-
如果不应用下面的解决方案代码，则显示图形的演示。
-
如果您确实应用了解决方案代码，则图形的另一个演示。
要查看差异，当鼠标指针在图形上时滚动鼠标滚轮。
下面的代码检测鼠标滚轮是否被移动。如果是这种情况，则在接下来的1.5秒内将变量scrolled设置为1，并应用正常的页面滚动行为。
如果在接下来的1.5秒内rangechange事件被annotatedtimeline对象触发，则范围的更改将被撤销。这样，您的原始图形缩放级别被恢复。
如果用户以任何其他方式更改缩放级别，例如通过拖动图形上的一些控件，则新状态保存在变量chartRange中，该变量在必须撤消范围更改的时刻读取。
解决方案代码下面:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// source: https://developers.google.com/chart/interactive/docs/
// gallery/annotatedtimeline
google.load('visualization', '1', {packages: ['annotatedtimeline']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
[new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
[new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
[new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock',
'Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens',
66467, null, null],
[new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
]);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {'displayAnnotations': true,
'wmode': 'transparent'});
// In the lines below the default scroll when the mouse is on the
// AnnotatedTimeLine graph is disabled and normal page scroll
// behaviour is enabled.
var chartRange, scrolled, mySetInterval
google.visualization.events.addListener(annotatedtimeline , 'ready',
function() {
//save the zoom state in chartRange after graph has been rendered
chartRange = annotatedtimeline.getVisibleChartRange();
});
google.visualization.events.addListener(annotatedtimeline ,
'rangechange',function() {
if (scrolled) {
// document was scrolled during last 1.5 seconds, therefore undo
// zooming. The 1.5 second delay is needed because rangechange is
// fired one 1 second after scroll event
annotatedtimeline.setVisibleChartRange(chartRange.start,
chartRange.end);
}else{
// document was not scrolled during last 1.5 seconds, therefore
// save the zoom state in chartRange
chartRange = annotatedtimeline.getVisibleChartRange();
}
});
// source: http://help.dottoro.com/ljqeknfl.php
// for mouse scrolling in Firefox
var elem = document.getElementById ("visualization");
if (elem.addEventListener) {//all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
elem.addEventListener ("mousewheel", MouseScroll, false);
// Firefox
elem.addEventListener ("DOMMouseScroll", MouseScroll, false);
}
else {
if (elem.attachEvent) { // IE before version 9
elem.attachEvent ("onmousewheel", MouseScroll);
}
}
//original from:http://help.dottoro.com/ljqeknfl.php and edited by me
function MouseScroll (event) {
// set scrolled to 1 for the next 1.5 second, and via
// mySetInterval make sure when multiple scroll event in 1.5
// second appear, everything wroks correctly
clearInterval(mySetInterval);
scrolled=1;mySetInterval=setInterval(function(){scrolled=0},1500);
//determine distance to be rolled
var rolled = 0;
if ('wheelDelta' in event) {
rolled = event.wheelDelta;
}
else { // Firefox
// The measurement units of the detail and wheelDelta
// properties are different.
rolled = -40 * event.detail;
}
//apply normal page scroll behaviour
document.body.scrollTop -=rolled;
}
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
<div style="height:1200px; background-color:#a08080;"></div>
</body>
</html>