如何在 HTML 中同时渲染多个 Chart.js 图表

花韻仙語 2025-12-26 00:00:00 次阅读

本文详解如何在单页 html 中正确初始化多个 chart.js 图表实例，解决因 dom 加载时机、重复 id 引用或全局变量覆盖导致的“仅最后一个图表显示”问题，并提供可复用的代码结构与最佳实践。

在使用 Chart.js 时，一个常见误区是：为多个 canvas> 元素分别调用 new Chart()，却未确保每个 canvas 在调用时已存在于 DOM 中，或错误复用了同一变量（如 window.myBar）覆盖前序实例，最终仅最后一个图表成功渲染。

✅ 正确做法是：在 DOM 完全就绪后，遍历所有目标 canvas ID，为每个唯一 ID 创建独立的 Chart 实例。以下为完整、健壮的实现方案：

✅ 推荐写法：使用 DOMContentLoaded + 循环初始化



  销售统计（Q1）
  


  销售统计（Q2）
  


  销售统计（Q3）
  


  销售统计（Q4）

⚠️ 关键注意事项

不要依赖 window.onload：它需等待所有资源（图片、CSS、字体等）加载完成，延迟高；而 DOMContentLoaded 仅等待 DOM 解析完毕，更及时且可靠。
避免变量覆盖：原代码中 window.myBar = new Chart(...) 每次赋值都会覆盖前一个引用——这不是渲染失败的原因，但不利于后续控制；若无需引用，可直接 new Chart(...)；如需管理，建议用数组或 Map 存储：
```
const charts = new Map();
chartIds.forEach(id => {
  const chart = new Chart(...);
  charts.set(id, chart);
});
```
确保 canvas 存在且唯一：ID 必须全局唯一，且对应
已渲染到页面中。可在初始化前加校验：
```
const el = document.getElementById(id);
if (!el) console.warn(`Canvas with id "${id}" not found`);
```
Chart.js v4+ 配置变更：options.legend.display 已移至 options.plugins.legend.display，旧版（v2/v3）语法不兼容，请按所用版本调整。

✅ 进阶建议：封装为可复用函数

function createBarChart(id, data, options = {}) {
  const ctx = document.getElementById(id)?.getContext('2d');
  if (!ctx) return;

  return new Chart(ctx, {
    type: 'bar',
    data,
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      ...options
    }
  });
}

// 使用示例
createBarChart('bars1', {
  labels: ['A', 'B', 'C'],
  datasets: [{ data: [10, 20, 15], backgroundColor: '#5a67d8' }]
});