如何在多个canvas中复用同一ChartJs图表对象？

实现同一图表在多个Canvas渲染的方法 #

Chart.js的每个实例只能绑定单个Canvas元素，所以不能直接把同一个Chart实例分配给多个Canvas。要实现同一图表多Canvas渲染，核心思路是：为每个Canvas创建独立的Chart实例，但共享同一套配置和数据对象，这样既能保证所有图表样式、数据一致，也能在数据更新时同步刷新所有图表。

具体步骤 #

1. 准备多个Canvas元素
   在HTML中添加多个Canvas，可通过类名统一选择，或用不同ID：

   <canvas class="shared-chart" width="400" height="200"></canvas>
   <canvas class="shared-chart" width="400" height="200"></canvas>
   <canvas class="shared-chart" width="400" height="200"></canvas>
   

2. 定义共享的图表配置与数据
   创建一个通用配置对象，包含图表类型、数据、选项等，所有Chart实例共用这个对象：

   // 共享的配置与数据
   const sharedChartConfig = {
     type: 'bar',
     data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3],
         backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)',
           'rgba(255, 206, 86, 0.2)',
           'rgba(75, 192, 192, 0.2)',
           'rgba(153, 102, 255, 0.2)',
           'rgba(255, 159, 64, 0.2)'
         ],
         borderColor: [
           'rgba(255, 99, 132, 1)',
           'rgba(54, 162, 235, 1)',
           'rgba(255, 206, 86, 1)',
           'rgba(75, 192, 192, 1)',
           'rgba(153, 102, 255, 1)',
           'rgba(255, 159, 64, 1)'
         ],
         borderWidth: 1
       }]
     },
     options: {
       scales: {
         y: {
           beginAtZero: true
         }
       }
     }
   };
   

3. 为每个Canvas创建独立的Chart实例
   遍历所有目标Canvas，基于共享配置创建实例，并保存这些实例以便后续更新：

   // 保存所有Chart实例的数组
   const chartInstances = [];
   
   // 获取所有目标Canvas
   const canvases = document.querySelectorAll('.shared-chart');
   
   // 为每个Canvas创建Chart实例
   canvases.forEach(canvas => {
     const chart = new Chart(canvas, sharedChartConfig);
     chartInstances.push(chart);
   });
   

4. 同步更新所有图表
   当需要修改数据时，直接修改sharedChartConfig.data，然后遍历所有实例调用update()方法，即可同步刷新所有图表：

   // 示例：修改数据并同步更新所有图表
   function updateAllCharts() {
     // 修改共享数据
     sharedChartConfig.data.datasets[0].data = [Math.random()*20, Math.random()*20, Math.random()*20, Math.random()*20, Math.random()*20, Math.random()*20];
     // 遍历所有实例更新
     chartInstances.forEach(chart => chart.update());
   }
   
   // 调用示例：点击按钮更新
   document.querySelector('#update-btn').addEventListener('click', updateAllCharts);
   

注意事项 #

• 不能复用同一个Chart实例：每个Chart实例与单个Canvas绑定，强行复用会导致渲染异常。
• 共享配置的引用特性：由于JavaScript对象是引用类型，修改sharedChartConfig会影响所有实例。如果需要某几个实例有独立配置，需对配置对象进行深拷贝（比如用JSON.parse(JSON.stringify(sharedChartConfig))）后再创建实例。
• 性能考量：如果Canvas数量过多，大量实例同时更新可能影响性能，可根据实际场景优化（比如批量更新、节流处理）。

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