Livewire应用数据刷新时Chart.js元素丢失Canvas属性的排查与解决

核心问题分析 #

你的问题本质是Livewire更新DOM时，旧的Chart.js实例未被正确销毁，导致新实例与DOM元素绑定冲突，引发尺寸异常、渲染失败等问题。以下是具体排查和修复步骤：

1. 销毁旧图表实例（关键） #

Livewire更新组件内容时会替换DOM节点，旧的Chart实例仍绑定在已被移除的元素上，造成内存泄漏和新实例异常。在全局或组件JS中添加Livewire钩子：

// 监听Livewire更新前事件，销毁旧实例
window.addEventListener('livewire:updating', () => {
  if (window.reactionsChart) {
    window.reactionsChart.destroy();
    window.reactionsChart = null;
  }
});

注：将图表实例挂载到window全局变量，方便统一管理和销毁

2. 确保DOM就绪后重新初始化图表 #

Livewire更新完成后，等待DOM完全渲染再创建新的Chart实例，避免元素未加载导致的异常：

// 监听Livewire更新完成事件，初始化新图表
window.addEventListener('livewire:updated', () => {
  const ctx = document.getElementById('reactionsChartStatisticsChart');
  if (ctx && !window.reactionsChart) {
    window.reactionsChart = new Chart(ctx, {
      type: 'bar', // 替换为你的图表类型
      data: @json($chartData),
      options: {
        responsive: true,
        maintainAspectRatio: false, // 强制图表自适应容器尺寸，解决变小问题
        // 其他自定义配置
      }
    });
  }
});

3. 固定容器尺寸避免重置 #

给图表容器添加稳定的CSS样式，防止Livewire更新时容器尺寸被意外修改：

#reactionsChartContainer {
  width: 100%;
  min-height: 400px; /* 根据需求调整 */
}

4. 验证数据传递正确性 #

在Livewire组件中确认过滤器变更后$chartData的格式正确：

public function applyFilters()
{
    // 你的过滤逻辑
    $this->chartData = $this->fetchFilteredData();
    
    // 调试用：确认labels和datasets结构符合Chart.js要求
    // dd($this->chartData);
}

确保$chartData包含完整的labels数组和datasets数组，无空值或格式错误。

5. 避免重复初始化 #

检查livewire:updated钩子中的判断逻辑，确保只有在window.reactionsChart不存在时才创建新实例，防止重复初始化导致的冲突。

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