如何实现Google Chart仅在滚动进入可视区域时触发动画效果

API 探路者

2026-10-2

实现方案

使用性能更优的Intersection ObserverAPI监听图表容器的可见性，仅当容器进入可视区域时才执行图表绘制逻辑，就能实现进入视口才触发入场动画的效果。

修改后完整代码

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- 给容器设置高度，避免渲染异常 -->
<div id="chart_div" style="height: 400px;"></div>

<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
// 预加载资源，仅标记加载状态，不直接触发绘制
let chartLoaded = false;
google.charts.setOnLoadCallback(() => {
  chartLoaded = true;
});

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
    },
  };  

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

// 初始化可见性监听器
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 容器进入可视区且谷歌图表资源已加载完成时触发绘制
    if (entry.isIntersecting && chartLoaded) {
      drawMultSeries();
      // 绘制完成后停止监听，避免滚动时重复触发
      observer.unobserve(entry.target);
    }
  })
}, {
  threshold: 0.1 // 容器10%进入可视区就触发，可根据需求调整比例
})

// 绑定需要监听的图表容器
observer.observe(document.getElementById('chart_div'));
</script>