Как отключить колесо прокрутки мыши изменение масштаба в Google Аннотированная хронология?

Я использую Аннотированную диаграмму временной шкалы Google, и колесо прокрутки мыши масштабирование временной шкалы становится раздражающим. Я хочу иметь возможность прокручивать вниз мою страницу диаграмм с колесом прокрутки, но график временной шкалы перехватывает события колеса прокрутки. Это мешает мне прокручивать страницу вниз и изменяет масштаб моей временной шкалы до непригодного диапазона.

1 4
google-visualization scrollwheel

1 ответ:

Я написал решение для вашей проблемы. Я применил свое решение к примеру аннотированной временной шкалы из google и, кроме того, я использовал технику захвата событий колесика мыши из здесь.

Чтобы воспроизвести задачу:

  1. Демонстрация графа , Если вы не применяете код решения ниже.

  2. Еще одна демонстрация графика, если вы применяете код решения.

Чтобы увидеть разницу прокрутите колесо мыши, пока указатель мыши находится на графике.

Приведенный ниже код определяет, перемещается ли колесо мыши. В этом случае переменная scrolled устанавливается в значение 1 в течение следующих 1,5 секунд и применяется обычное поведение прокрутки страницы.

Если в течение следующих 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>
2