Chrome切换标签/最小化后Chart.js实时波形错乱的解决咨询

使用Chart.js在Chrome浏览器中实时显示波形数据，标签处于激活状态时显示正常，但浏览器最小化恢复或切换标签后，波形出现间隙、重叠、凹陷等错乱问题。尝试处理标签切换事件，仍无法维持波形连续流畅。

核心原因是浏览器在后台时会节流requestAnimationFrame，导致丢帧，而原代码每次仅生成单个数据点，无法补全后台期间缺失的点。以下是针对性解决方案：

• 补全后台缺失的数据点：记录上一次更新的时间戳，每次更新时计算当前与上次的时间差，根据预设的每秒点数生成这段时间内所有应存在的数据点，而非仅生成一个点。
• 优化时间计算逻辑：使用累计流逝时间替代依赖Date.now()的绝对时间，避免标签切换时的时间跳变影响波形连续性。
• 监听页面可见性事件：配合visibilitychange事件，在页面隐藏时暂停动画帧请求，恢复可见时一次性补全数据，减少不必要的性能消耗。

修改后的代码示例 #

JavaScript #

const ctx = document.getElementById('waveformChart').getContext('2d');
const POINTS_PER_SECOND = 100; // 每秒生成的数据点数
const WINDOW_SIZE = 10; // 波形显示窗口的时间范围（秒）
let lastUpdateTime = Date.now(); // 记录上一次更新的时间戳
let elapsedTime = 0; // 累计流逝的时间（秒）

const chart = new Chart(ctx, {
   type: 'line',
   data: {
      datasets: [{
         label: 'Waveform',
         data: [],
         borderColor: 'rgb(75, 192, 192)',
         borderWidth: 2,
         tension: 0.3,
         pointRadius: 0
      }]
   },
   options: {
      responsive: true,
      animation: false,
      interaction: {
         intersect: false
      },
      plugins: {
         legend: {
            display: false
         }
      },
      scales: {
         x: {
            type: 'linear',
            display: true,
            title: {
               display: true,
               text: 'Time (seconds)'
            },
            ticks: {
               maxRotation: 0,
               callback: function(value){
                  return Math.round(value);
               }
            },
            grid: {
               display: true
            }
         },
         y: {
            title: {
               display: true,
               text: 'Amplitude'
            },
            min: -1.5,
            max: 1.5
         }
      }
   }
});

function generateWaveformData(time){
   const frequency = 1; // 波形频率（1Hz）
   const amplitude = 1.0;
   return amplitude * Math.sin(2 * Math.PI * frequency * time);
}

function updateChart(){
   const now = Date.now();
   const delta = (now - lastUpdateTime) / 1000; // 计算两次更新的时间差（秒）
   lastUpdateTime = now;
   elapsedTime += delta;

   // 计算这段时间内需要生成的数据点数
   const pointsToGenerate = Math.floor(delta * POINTS_PER_SECOND);
   const timeStep = 1 / POINTS_PER_SECOND; // 每个数据点的时间间隔

   // 批量生成所有缺失的数据点
   for(let i = 1; i <= pointsToGenerate; i++){
      const pointTime = elapsedTime - delta + (i * timeStep);
      const newPoint = {
         x: pointTime,
         y: generateWaveformData(pointTime)
      };
      chart.data.datasets[0].data.push(newPoint);
   }

   // 过滤掉超出显示窗口范围的旧数据
   chart.data.datasets[0].data = chart.data.datasets[0].data.filter(point =>
      point.x > elapsedTime - WINDOW_SIZE
   );

   // 更新X轴的显示范围，保持窗口固定
   chart.options.scales.x.min = elapsedTime - WINDOW_SIZE;
   chart.options.scales.x.max = elapsedTime;

   chart.update('quiet');
}

// 页面可见性状态监听
let animationId;
function handleVisibilityChange() {
  if (!document.hidden) {
    // 页面恢复可见时重置更新时间并重启动画
    lastUpdateTime = Date.now();
    animate();
  } else {
    // 页面隐藏时取消动画帧请求，减少性能消耗
    cancelAnimationFrame(animationId);
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange);

function animate(){
   updateChart();
   animationId = requestAnimationFrame(animate);
}

// 启动波形动画
animate();

CSS #

.container {
   width: 90%;
   margin: 20px auto;
}

canvas {
   background-color: #f5f5f5;
   border-radius: 5px;
   padding: 10px;
}

HTML #

<div class='container'>
   <canvas id='waveformChart'></canvas>
</div>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>

内容的提问来源于stack exchange，提问作者Sathish Kumar