Animate Chart.JS只有一次

我拖延了Chart.js画布的动画，直到将其带入视口，但我努力将其限制为只有一个动画。我非常感谢这方面的任何投入。Animate 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; 
    } 
});

来源

2015-10-26 jivers

你不需要一个'animation'属性呢？我认为如果你已经滚动到视图中标记为“假”，应该是正确的方法。请参阅['chart.js'文档]（http://www.chartjs.org/docs/#getting-started-global-chart-configuration）现在它在做什么？ – zero298

默认情况下，Chart.js的全局设置（您可以使用该设置打开或关闭）启用动画。我描述的动画效果很好，但它每次都运行#trigger滚动到视图中。我希望动画只在第一次发生时才会发生。 – jivers

你需要跟踪是否已经生成的图表。触发器元素是您可以执行此操作的一个位置（如果您没有为多个图表使用相同的触发器），否则也可以使用canvas元素。

你也不需要inView

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

来源

2015-10-27 10:40:14 potatopeelings

谢谢〜这个伎俩。 – jivers

Animate Chart.JS只有一次

回答

相关问题