HTML多Chart.js图表渲染技巧

哈喽！今天心血来潮给大家带来了《HTML 中多 Chart.js 图表渲染方法》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

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

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

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

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

<!-- 四个独立的图表容器 -->
<div class="chart-container">
  <h4>销售统计（Q1）</h4>
  <canvas id="bars1" height="100"></canvas>
</div>
<div class="chart-container">
  <h4>销售统计（Q2）</h4>
  <canvas id="bars2" height="100"></canvas>
</div>
<div class="chart-container">
  <h4>销售统计（Q3）</h4>
  <canvas id="bars3" height="100"></canvas>
</div>
<div class="chart-container">
  <h4>销售统计（Q4）</h4>
  <canvas id="bars4" height="100"></canvas>
</div>

<!-- Chart.js 库（建议放在 body 底部或使用 defer） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- 初始化脚本（必须在 canvas 和 Chart.js 之后执行） -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const chartIds = ['bars1', 'bars2', 'bars3', 'bars4'];

    chartIds.forEach(id => {
      const ctx = document.getElementById(id).getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
          datasets: [{
            label: 'Bags Sold',
            backgroundColor: '#7e3af2',
            borderWidth: 1,
            data: [66, 33, 43, 12, 54, 62, 84]
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { display: false }
          }
        }
      });
    });
  });
</script>

⚠️ 关键注意事项

• 不要依赖 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' }]
});

通过以上方式，你不仅能稳定渲染多个图表，还能保持代码清晰、可维护，并为未来动态增删图表预留扩展空间。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。