Как отключить масштабирование колеса прокрутки мыши в Google Annotated Timeline? - PullRequest
Новая
       38

Как отключить масштабирование колеса прокрутки мыши в Google Annotated Timeline?

4 голосов
/ 16 июля 2011

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

1 Ответ

2 голосов
/ 12 ноября 2012

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

Чтобы воспроизвести проблему:

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

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

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

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

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