Question

我正在使用Google Annotated Timeline图表，鼠标滚轮缩放时间刻度变得很烦人。我希望能够使用滚轮向下滚动我的图表页面，但时间线图表正在拦截滚轮事件。它阻止我向下滚动页面并将我的时间轴缩放更改为无法使用的范围。

Answer 1

我为你的问题写了一个解决方案。我已经将我的解决方案应用于来自google的示例注释时间轴，而且我使用了来自here的鼠标滚轮事件捕获技术。

重现问题：

Demo of graph。
Another demo图表。

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

以下代码检测鼠标滚轮是否移动。如果是这种情况，则变量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>

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

1 个答案: