javascript - 如何使谷歌图表动画仅在滚动时才开始?
问题描述
嗨,我想知道如何让谷歌图表动画只在滚动和进入视野时才开始。
<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);
}
解决方案
您可以在滚动时添加一个侦听器,并且仅在条件下加载谷歌图表(“当用户滚动通过#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);
}
}
}
});
推荐阅读
- python - 在测试数据类型时,在 for 循环中使用正则表达式的最佳方法是什么?
- c# - 如何使用 Parse.Console.ReadLine(); 修复输入?
- python - Requests.Get 不适用于 API 调用 - 产生 401 错误和“未登录” - 第二次调用
- python - 尽管添加了 utf-8 编码,但我不断收到 UnicodeErrors 打开 CSV 文件
- jmeter - 会话 cookie 值未传递给请求,尽管它显示在 JMeter 的调试采样器中
- javascript - 如何调用netlify函数并在另一个js文件中传递变量?
- c++ - 内联函数选择标准
- java - FLINK CEP (Java 8) - 通过匹配模式持久化“身份”
- ansible - 有条件的事实
- vba - 更改修订视图后不正确的段落样式属性