仅对Chart.JS进行一次动画处理 [英] Animate Chart.JS Only Once

问题描述

我已经将Chart.js画布的动画延迟到视口中，但是正在努力将其限制为仅一个动画。我将不胜感激对此的任何投入。

I've delayed animation of a Chart.js canvas until it's brought into the viewport, but am struggling to limit this to only one animation. I'd greatly appreciate any input on this.

这里是代码：

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

推荐答案

您需要跟踪图表是否已经产生。 trigger元素是可以在其中进行操作的一个位置（如果您未在多个图表中使用相同的触发器），否则也可以使用canvas元素。

You need to keep track of whether the chart was already generated. The trigger element is one place you can do this (if you are not using the same trigger for multiple charts), otherwise you could use the canvas element as well.

您也不需要 inView

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

这篇关于仅对Chart.JS进行一次动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！