我正在使用 chart.js 在页面上制作一些漂亮的 Canvas 图表。我希望当用户向下滚动页面时加载图表,如下例所示:http://www.chartjs.org
我在他们的网站上找不到有关他们如何做到这一点的任何信息。我尝试使用 waypoints.js 作为基础自己设置它。这是我使用的代码
('.secTwo').waypoint(function(direction) {
$('.hidden').removeClass('hidden');
});
在我的 css .hidden 中设置为不透明度:0。这是因为图表会在 .secTwo 到达窗口顶部后立即出现。但是图表不像上面的例子那样动画。它只是出现了。
动画仅适用于页面加载。只要图表在屏幕上可见,我就需要它工作。有什么想法吗?
最佳答案
他们使用 Remy Sharps jquery 插件的修改版本,当用户将您的内容滚动到 View 中时添加触发“inview”事件。
https://github.com/zuk/jquery.inview/
在使用 Chart.js 修改代码之前,您必须检查它的许可证,但它们的源代码可以在这里找到:
http://www.chartjs.org/assets/effects.js
该插件允许您监听在“页面下方”内容滚动到 View 中时触发的“inview”事件。
这是一个例子:
$("#polarAreaChart").on("inview",function(){
var $this = $(this);
$this.removeClass("hidden").off("inview");
setTimeout(showPolarAreaChart,graphInitDelay);
});
关于javascript - 在用户滚动时加载 chart.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21240900/