Блог

Главная - Вопросы по программированию - Как я могу заставить анимацию диаграммы Google запускаться только тогда, когда она отображается при прокрутке?

Как я могу заставить анимацию диаграммы Google запускаться только тогда, когда она отображается при прокрутке?

#javascript #php #html #css

Вопрос:

Привет, я хочу знать, как я могу заставить анимацию диаграммы Google запускаться только при прокрутке и когда она появляется в поле зрения.

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>


google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', '2000 Population'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000]
  ]);

 var options = {  
              animation: {
            duration: 2000,
            startup: true //This is the new option
        },
           };  

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Комментарии:

1. Используйте наблюдатель пересечений и вводите диаграмму только тогда, когда она находится в поле зрения developer.mozilla.org/en-US/docs/Web/API/…

Ответ №1:

Вы можете добавить прослушиватель при прокрутке и загружать диаграмму Google только при условии («когда пользователь прокручивает #chart_div») :

 let alreadyLoaded = false ;     
window.addEventListener('scroll', function(){
if (alreadyLoaded === false){

        var element = document.querySelector('#chart_div');
        var position = element.getBoundingClientRect();
    
    
        if(position.top >= 0 amp;amp; position.bottom <= window.innerHeight) {

    
        // checking for partial visibility
        if(position.top < window.innerHeight amp;amp; position.bottom >= 0) {
    alreadyLoaded = true;  
       google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawMultSeries);
    
    function drawMultSeries() {
      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', '2000 Population'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]
      ]);
    
     var options = {  
                  animation: {
                duration: 2000,
                startup: true //This is the new option
            },
               };  
    
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
      }
}
     });

Комментарии:

1. Спасибо. Работает как заклинание, однако, когда я снова прокручиваю назад, анимация начинается сначала. Есть ли какой-нибудь способ заставить анимацию воспроизводиться только один раз после прокрутки и не воспроизводиться снова, пока страница не будет обновлена? Извини, я новичок в этом деле.

2. Конечно, вам просто нужно создать логическое значение (true/false) и отслеживать, когда скрипт загружается в первый раз ! (Я обновил свой пост, добавив это)

3. Спасибо за ответ и редактирование кода. Код действительно работает, анимация воспроизводится не более одного раза. Однако диаграмма становится видимой только в том случае, если она похожа на небольшой свиток. Например, когда я нахожусь в верхней части страницы, а диаграмма внизу, если я должен прокрутить ее до конца, диаграмма не будет видна, она будет отсутствовать до тех пор, пока страница не будет обновлена. Этого не было в предыдущем приведенном коде. Предыдущий код работал на 100%, анимация воспроизводилась только несколько раз, если я должен прокручивать. Есть ли какое-нибудь решение этой проблемы? Заранее спасибо.

Метки: ,