如何在同一HTML文件中使用两个不同版本的Chart.js并避免图表重叠？

核心问题是多个版本的Chart.js会覆盖全局的Chart对象，导致两个图表实际都使用了最后加载的版本，渲染逻辑冲突引发重叠。按以下步骤处理：

1. 隔离Chart.js的全局作用域 #

加载每个版本的Chart.js后，立即将全局的Chart对象保存到局部变量，然后清除全局变量，避免后续版本覆盖：

<!-- 加载v2版本Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
  // 保存v2版本到局部变量
  const ChartV2 = window.Chart;
  // 删除全局Chart，防止被后续版本覆盖
  delete window.Chart;
</script>

<!-- 加载v3版本Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
  // 保存v3版本到局部变量
  const ChartV3 = window.Chart;
</script>

2. 确保图表容器独立且布局合理 #

给每个图表的容器div设置间距，同时保证每个canvas有唯一ID：

<!-- 第一个图表容器，设置底部间距避免重叠 -->
<div style="margin-bottom: 3rem;">
  <canvas id="chartV2"></canvas>
</div>

<!-- 第二个图表容器 -->
<div>
  <canvas id="chartV3"></canvas>
</div>

3. 使用对应版本的Chart实例初始化图表 #

分别用保存的局部变量（ChartV2/ChartV3）创建各自的图表，指向对应的canvas：

<script>
  // 用v2版本创建第一个图表
  new ChartV2(document.getElementById('chartV2'), {
    type: 'bar',
    data: {
      labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
      datasets: [{
        label: 'v2版本柱状图',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{ ticks: { beginAtZero: true } }]
      }
    }
  });

  // 用v3版本创建第二个图表
  new ChartV3(document.getElementById('chartV3'), {
    type: 'line',
    data: {
      labels: ['周一', '周二', '周三', '周四', '周五'],
      datasets: [{
        label: 'v3版本折线图',
        data: [15, 22, 18, 25, 20],
        borderColor: 'rgba(54, 162, 235, 1)',
        backgroundColor: 'rgba(54, 162, 235, 0.1)',
        tension: 0.1
      }]
    },
    options: {
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
</script>

注意事项 #

• 不要在同一作用域混用不同版本的Chart实例，严格按隔离后的局部变量使用。
• 如果使用ES模块（浏览器支持type="module"），可以通过import别名直接区分版本：

  import * as ChartV2 from 'chart.js@2.9.4';
  import * as ChartV3 from 'chart.js@3.9.1';
  

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