Question

我有几个图表（通过chart.js完成），并且能够在视口中对其进行动画处理。在下面的代码中，fullyVisible（）将检查图表是否在视口中，如果是，则重新渲染它。问题在于，使用此代码，图表会在每次滚动时保持重新渲染，直到完全超出视口为止。我的问题是图表是否只能渲染一次。

$(window).on("resize scroll", function(){ 
  if ($('#myChart').fullyVisible()) {
    chart = new Chart(ctx, config); 
    chart.render();
   };    

  if ($('#myChart1').fullyVisible()) {
    chart1 = new Chart(ctx1, config1); 
    chart1.render();
   }; 
});

Answer 1

您可以使用布尔标志：

let isRendered = false;

…并对其进行测试：

if (!isRendered && $('#myChart').isFullyVisible()) {
    chart = new Chart(ctx, config); 
    chart.render();

    isRendered = !isRendered;
}

if (isRendered && $('#myChart').isOutOfView()) {
    chart.destroy();
    chart = null;

    isRendered = !isRendered;
}

…或者您可以检查chart是否存在：

let chart = null;

if (!chart && $('#myChart').isFullyVisible()) {
   chart = new Chart(ctx, config); 
   chart.render();
}

if (chart && $('#myChart').isOutOfView()) {
    chart.destroy();
    chart = null;
}

所有测试仅在需要时才进行可能昂贵的可见性测试。

请注意，最好缓存选择器，这样您就不必在每次滚动/调整大小事件时都重新查询它们：

const chartCanvas = $('#chart');

$(window).on('resize scroll', function☮ { 
    if (chartCanvas.fullyVisible()) {}
});

一次重新绘制chartjs

1 个答案: