Google Annotated Timeline チャートを使用していますが、タイム スケールのマウス スクロール ホイールのズームが煩わしくなります。スクロール ホイールを使用してチャートのページを下にスクロールできるようにしたいのですが、タイムライン チャートがスクロール ホイール イベントをインターセプトしています。ページを下にスクロールできなくなり、タイムラインのズームが使用できない範囲に変更されます。
質問する
2253 次
1 に答える
2
あなたの問題の解決策を書きました。Googleの注釈付きタイムラインの例にソリューションを適用し、さらにhereのマウス ホイール イベント キャプチャ手法を使用しました。
問題を再現するには:
違いを確認するには、マウス ポインターをグラフ上に置いたままマウス ホイールをスクロールします。
以下のコードは、マウス ホイールが動かされたかどうかを検出します。その場合、変数scrolled
は次の 1.5 秒間 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>
于 2012-11-12T10:53:01.443 に答える