Chart.js多数据集图表本地存储异常：单图表正常多图表数据互扰

一、修复双数据集同步变化问题 #

• 核心原因：计划成本和实际成本的数据集引用了同一个数据源对象，导致修改其中一个时另一个同步变更。
• 解决步骤：
  1. 初始化时为两个数据集创建独立的数据源副本，避免共用引用：

     // 错误写法：共用同一数组导致联动
     const sharedCosts = [1000, 2000, 3000];
     const planDataset = { data: sharedCosts };
     const actualDataset = { data: sharedCosts };
     
     // 正确写法：创建独立的数组副本
     const planCosts = [1000, 2000, 3000];
     // 一维数组用扩展运算符拷贝，复杂结构用JSON.parse(JSON.stringify())深拷贝
     const actualCosts = [...planCosts]; 
     const planDataset = { label: '计划成本', data: planCosts };
     const actualDataset = { label: '实际成本', data: actualCosts };
     

  2. 调整计划成本时，仅修改planDataset.data对应的元素，不触碰实际成本的数据源：

     // 修改指定索引的计划成本
     function updatePlanCost(index, newValue) {
       planDataset.data[index] = parseFloat(newValue);
       chartInstance.update(); // 仅更新当前图表
     }
     

二、解决多图表数据共享混乱问题 #

• 核心原因：多个图表共用了相同的localStorage键名，或初始化时复用了同一数据集变量，导致数据交叉污染。
• 解决步骤：
  1. 为每个图表分配唯一的localStorage标识，结合图表ID区分存储键：

     // 存储指定图表的数据
     function saveChartData(chartId, data) {
       localStorage.setItem(`project_chart_${chartId}`, JSON.stringify(data));
     }
     
     // 读取指定图表的存储数据
     function loadChartData(chartId) {
       const savedData = localStorage.getItem(`project_chart_${chartId}`);
       return savedData ? JSON.parse(savedData) : null;
     }
     

  2. 每个图表初始化时创建独立的数据集实例，不复用全局变量：

     // 初始化图表1
     function initChart1() {
       const saved = loadChartData('main_project');
       const planCosts = saved?.plan || [1000, 2000, 3000];
       const actualCosts = saved?.actual || [900, 2100, 2800];
       
       return new Chart(document.getElementById('chart1'), {
         type: 'bar',
         data: {
           labels: ['阶段1', '阶段2', '阶段3'],
           datasets: [
             { label: '计划成本', data: planCosts },
             { label: '实际成本', data: actualCosts }
           ]
         }
       });
     }
     
     // 初始化图表2（完全独立的数据集）
     function initChart2() {
       const saved = loadChartData('sub_project');
       const planCosts = saved?.plan || [500, 1500, 2500];
       const actualCosts = saved?.actual || [450, 1600, 2400];
       
       return new Chart(document.getElementById('chart2'), {
         type: 'bar',
         data: {
           labels: ['子项目A', '子项目B', '子项目C'],
           datasets: [
             { label: '计划成本', data: planCosts },
             { label: '实际成本', data: actualCosts }
           ]
         }
       });
     }
     

  3. 更新数据时，仅针对当前操作的图表实例和对应存储键操作：

     // 全局存储图表实例，避免重复获取DOM
     window.chartInstances = {
       chart1: initChart1(),
       chart2: initChart2()
     };
     
     // 更新图表1的计划成本并存储
     function updateChart1Plan(index, newValue) {
       const chart = window.chartInstances.chart1;
       chart.data.datasets[0].data[index] = parseFloat(newValue);
       chart.update();
       // 存储当前图表的独立数据
       saveChartData('main_project', {
         plan: chart.data.datasets[0].data,
         actual: chart.data.datasets[1].data
       });
     }
     

三、额外注意事项 #

• 对于嵌套的复杂数据结构，务必使用JSON.parse(JSON.stringify(data))进行深拷贝，避免浅拷贝导致的隐性引用问题。
• 不要用全局变量存储数据集，尽量在图表初始化函数内创建局部数据源，减少污染。
• 修改数据后，仅调用当前图表实例的update()方法，避免批量更新所有图表。

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