javascript - 仅对 Chart.JS 进行一次动画处理

Question

我已经延迟了 Chart.js Canvas 的动画，直到将其带入视口(viewport)，但我正在努力将其限制为只有一个动画。我非常感谢对此的任何意见。

代码如下:

var inView = false;
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView('#trigger')) {
        if (inView) { return; }
        inView = true;
        new Chart(document.getElementById("myChart").getContext("2d")).Line(data, {
            responsive: true,
            maintainAspectRation: true,
            animationSteps: 175,
            showScale: false,
            scaleShowGridLines : false,
            scaleShowLabels: false,
            showTooltips: false
       });
    } else {
        inView = false;  
    }
});

Answer 1

您需要跟踪图表是否已经生成。触发器元素是您可以执行此操作的一个地方(如果您没有对多个图表使用相同的触发器)，否则您也可以使用 canvas 元素。

您也不需要inView

...
if (isScrolledIntoView('#trigger')) {
    if ($('#trigger').data("generated")) { return; }
    $('#trigger').data("generated", true);
    ...