触发简易饼图的动画.js带有航点

我正在尝试将使用easypiechart.js构建的动画图表绑定到航点，以便仅在用户向下滚动到图表时触发动画。创建图表的脚本如下所示：

$(function(){
$('.chart').easyPieChart({
        easing: 'easeOutBounce',
        barColor:'#545ec4',
        trackColor:'#ccc',
        scaleColor:false,
        lineWidth:2,
        size:191,
        lineCap:'circle',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
}); 

但是，当我尝试将此功能包装到航点函数中时，它根本不起作用，甚至图表消失了。

我是这样做的：

$('.chart').waypoint(function(event, direction) {
    $('.chart').easyPieChart({
        easing: 'easeOutBounce',
        barColor:'#545ec4',
        trackColor:'#ccc',
        scaleColor:false,
        lineWidth:2,
        size:191,
        lineCap:'circle',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
},{
  triggerOnce: true,
  offset: 'bottom-in-view'
});

任何解释或更正将不胜感激。