私はGoogle注釈付きタイムラインチャートを使用しています。マウスのスクロールホイールの時間スケールのズームは迷惑になりつつあります。私はスクロールホイールでチャートのページをスクロールできるようにしたいが、タイムラインチャートはスクロールホイールイベントをインターセプトしている。それは私がページをスクロールすることを防ぎ、タイムラインズームを使用不可能な範囲に変更します。Google注釈付きタイムラインでマウススクロールホイールのズームを無効にするにはどうすればよいですか？
私はあなたの問題の解決方法を書いています。私はgoogleの注釈付きタイムラインの例に私のソリューションを適用しました。さらに、hereからマウスホイールのイベントキャプチャ技術を使用しました。あなたは以下のソリューションコードを適用しない場合
Another demoソリューションコードを適用すると、
違いを見るには、マウスポインタがグラフ上にある間にマウスホイールをスクロールします。
以下のコードは、マウスホイールが移動したかどうかを検出します。その場合、変数scrolledは次の1.5秒間に1に設定され、通常のページスクロール動作が適用されます。
次の1.5秒の間にannotatedtimelineオブジェクトによってrangechangeイベントが発生した場合、範囲の変更は取り消されます。こうして元のグラフのズームレベルが復元されます。
ユーザーが他の方法でズームレベルを変更した場合、グラフ上のいくつかのコントロールをドラッグすると、新しい状態が変数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>
私はおそらく何かを明らかに欠けているが、私は、グラフをスクロールしたときの違いを見るように見えることはできません。 – Ren
（1）[このグラフ]（https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline#Example）にマウスでスクロールすると、拡大してページがスクロールしません。これは標準のGoogle APIの動作です。 （2）[このグラフ]（http://www.allepeilingen.com/index.php/peilingen-politieke-partijen-maurice-de-hond.html）でマウスをスクロールすると、グラフは拡大されず、 Webページが下にスクロールし、これは質問で要求された動作です。 – Ruut
私はFirefox 16でテストしていました - うまくいきません。それはクロムでうまく動作します。 – Ren