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只有一次

回答

相關問題