Hola, quiero saber cómo puedo hacer que la animación del gráfico de Google solo comience cuando se desplaza y cuando aparece.
<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); }Puede agregar un oyente en el desplazamiento y solo cargar el gráfico de Google con la condición ("cuando el usuario pase el desplazamiento #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 && position.bottom <= window.innerHeight) { // checking for partial visibility if(position.top < window.innerHeight && 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); } } } });