javascript - 在用户滚动时加载 chart.js

Question

我正在使用 chart.js 在页面上制作一些漂亮的 Canvas 图表。我希望当用户向下滚动页面时加载图表，如下例所示:http://www.chartjs.org

我在他们的网站上找不到有关他们如何做到这一点的任何信息。我尝试使用 waypoints.js 作为基础自己设置它。这是我使用的代码

('.secTwo').waypoint(function(direction) {
$('.hidden').removeClass('hidden');
 });

在我的 css .hidden 中设置为不透明度:0。这是因为图表会在 .secTwo 到达窗口顶部后立即出现。但是图表不像上面的例子那样动画。它只是出现了。

动画仅适用于页面加载。只要图表在屏幕上可见，我就需要它工作。有什么想法吗？

Answer 1

他们使用 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);          

});