循环初始化多图表数据重复问题及优化方案咨询

你的问题确实是因为所有图表复用了同一个chartConfigs里的对象引用——每次循环你修改的都是原始配置对象，最后所有图表都会使用最后一次修改的数据。

最优方案：用工厂函数生成独立配置 #

把你的静态配置改成工厂函数，每次调用返回全新的配置对象，彻底避免引用共享：

// 替换原有的chartConfigs对象
const getChartConfig = (type) => {
  switch(type) {
    case 'bar':
      return {
        type: 'bar',
        data: {
          labels: [],
          datasets: [{
            data: [],
            pointRadius: 2,
            backgroundColor: '',
            maxBarThickness: 50
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: barScalesOptions // 不变的配置直接复用引用，无风险
        }
      };
    case 'pie':
      return {
        type: 'pie',
        data: {
          labels: [],
          datasets: [{
            data: [],
            backgroundColor: ['#84c267', '#c9556a'],
            borderWidth: 0
          }]
        },
        options: {
          legend: {
            labels: {
              fontColor: '#CCC',
            }
          },
          aspectRatio: 1,
          responsive: true
        }
      };
    default:
      throw new Error(`Unsupported chart type: ${type}`);
  }
};

然后修改初始化逻辑，每次获取新的配置对象：

container.querySelectorAll('canvas').forEach(canv => {
    const chartOptions = getChartConfig(canv.dataset.type);
    chartOptions.data.datasets[0].data = JSON.parse(canv.dataset.data);
    
    if(canv.dataset.labels) {
        chartOptions.data.labels = JSON.parse(canv.dataset.labels);
    }

    new Chart(canv, chartOptions);
});

为什么这个方案更好？ #

1. 无引用共享问题：每次调用getChartConfig都会生成全新的配置对象，修改其中的data/labels只会影响当前图表。
2. 性能友好：不需要复杂的深拷贝，只在需要的时候创建新对象，内存开销可控——不变的配置（比如barScalesOptions、饼图的背景色数组）可以安全复用引用，因为你不会修改这些部分。
3. 扩展性强：后续新增图表类型时，只需在switch里添加对应的case即可，逻辑清晰。

备选方案：针对嵌套对象做按需拷贝 #

如果不想重构为工厂函数，也可以手动拷贝配置的可变部分：

container.querySelectorAll('canvas').forEach(canv => {
    const baseConfig = chartConfigs[canv.dataset.type];
    // 深拷贝data部分，浅拷贝其他不变的配置
    const chartOptions = {
        ...baseConfig,
        data: {
            ...baseConfig.data,
            labels: [],
            datasets: baseConfig.data.datasets.map(ds => ({...ds, data: []}))
        }
    };

    chartOptions.data.datasets[0].data = JSON.parse(canv.dataset.data);
    if(canv.dataset.labels) {
        chartOptions.data.labels = JSON.parse(canv.dataset.labels);
    }

    new Chart(canv, chartOptions);
});

这种方式适合配置变动较少的场景，但工厂函数的可读性和维护性更优。

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