Question

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

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

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

在我的CSS中.hidden设置为不透明度：0。这样做的原因是图表会立即出现.secTwo会点击窗口的顶部。但是图表并没有像上面的例子那样动画。它只是出现了。

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

Answer 1

他们使用Remy Sharps jquery插件的修改版本，当用户将您的内容滚动到视图中时，会添加触发器“inview”事件。

https://github.com/zuk/jquery.inview/

在使用之前，您必须检查Chart.js修改过的代码的许可证，但是可以在此处获取它们的来源：

http://www.chartjs.org/assets/effects.js

该插件允许您收听“向下翻页”内容滚动到视图中时触发的“inview”事件。

以下是一个例子：

$("#polarAreaChart").on("inview",function(){

    var $this = $(this);

    $this.removeClass("hidden").off("inview");

    setTimeout(showPolarAreaChart,graphInitDelay);          

});

用户滚动时加载chart.js

1 个答案: