Question

我已经延迟了Chart.js画布的动画，直到它被带入视口，但我很难将其限制为只有一个动画。我非常感谢您对此的任何意见。

以下是代码：

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);
    ...

Animate Chart.JS仅一次

1 个答案: