如何禁用Google注释时间轴中的鼠标滚轮缩放？

Question

如何禁用Google注释时间轴中的鼠标滚轮缩放？

google-visualizationscrollwheelannotatedtimeline

4

我正在使用Google Annotated Timeline图表，但时间轴的鼠标滚轮缩放功能让我感到很烦。我希望能够使用滚动轮向下滚动我的图表页面，但时间轴图表会拦截滚轮事件。这导致我无法向下滚动页面，并将我的时间轴缩放到无法使用的范围。

- Kenny Wyland

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ruut · Accepted Answer

我为您的问题编写了一个解决方案。我将我的解决方案应用于来自谷歌的示例注释时间轴，并使用了此处的鼠标滚轮事件捕获技术。

要重现问题：

1.如果您没有应用下面的解决方案代码，则图形演示。 2.如果您应用了解决方案代码，则另一个演示图表。

要查看差异，请在鼠标指针位于图表上时滚动鼠标滚轮。

下面的代码检测鼠标滚轮是否移动。如果是这种情况，则在接下来的1.5秒内将变量scrolled设置为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>