本文详解如何在 Chart.js 中安全、可靠地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 Cannot read properties of undefined 错误及类型切换后渲染异常问题，核心在于销毁旧实例、深拷贝配置、按类型精准重建数据结构。

本文详解如何在 chart.js 中安全、可靠地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 `cannot read properties of undefined` 错误及类型切换后渲染异常问题，核心在于销毁旧实例、深拷贝配置、按类型精准重建数据结构。

在使用 Chart.js 构建可交互、多形态的数据可视化组件时，一个常见但易出错的需求是：支持运行时动态切换图表类型（如从饼图切回折线图）并适配不同结构的数据源。许多开发者尝试复用同一 Chart 实例调用 chart.config.type = 'newType' 后调用 chart.update()，但这极易引发错误——尤其是当饼图（单数据集、无 X 轴标签）与线/柱图（多数据集、共享 X 轴标签）之间双向切换时，原始 data.datasets 结构已不兼容新类型，导致 Cannot read properties of undefined (reading 'values') 等运行时异常。

✅ 正确解法是：每次类型或数据变更时，彻底销毁旧实例，基于原始配置模板 + 当前数据 + 目标类型，全新构建 Chart 实例。这虽略增开销，却是最稳定、最可控的方式。

关键实现要点

1. 强制销毁旧实例
   切换前必须调用 myChart.destroy()，清除所有事件监听、动画状态和 DOM 引用，避免内存泄漏与状态污染：

   if (myChart) {
     myChart.destroy();
   }

2. 深拷贝基础配置，防止引用污染
   使用 JSON.parse(JSON.stringify(config)) 创建配置副本（适用于纯 JSON 配置；若含函数或复杂对象，建议用 structuredClone 或 Lodash cloneDeep）：

   const temp = JSON.parse(JSON.stringify(config));
   temp.type = type; // 动态设置类型

3. 按类型精准构造 data 结构

   • Line / Bar 图：需 labels（X 轴）+ 多个 datasets，每个 dataset 的 data 为一维数值数组，长度与 labels 一致；
   • Pie 图：需 labels（图例项）+ 单个 datasets，其 data 为各系列总和的一维数组，backgroundColor 对应各扇区颜色。

   示例逻辑（精简核心）：

   if (type === 'line' || type === 'bar') {
     temp.data = {
       labels: currentData.axis,
       datasets: configDatasets.map((dataset, idx) => ({
         ...dataset,
         data: currentData.values[idx]?.values || [] // 安全访问，防 undefined
       }))
     };
   } else if (type === 'pie') {
     temp.data = {
       labels: configDatasets.map(d => d.label),
       datasets: [{
         backgroundColor: configDatasets.map(d => d.backgroundColor),
         data: currentData.values.map(v => v.values?.reduce((a, b) => a + b, 0) || 0)
       }]
     };
   }

4. 数据容错处理（关键！）
   原始问题中 data3 仅含 1 个 series，但 config.datasets 初始化为 3 个。若直接 map 访问 currentData.values[index]，索引 1 和 2 将返回 undefined → undefined.values 报错。务必添加空值保护：

   data: currentData.values[idx]?.values || []

5. 完整初始化流程

   function mixDataConfig() {
     const currentData = dataArr[currentDataIndex];
     const ctx = document.getElementById('canvas').getContext('2d');
     if (myChart) myChart.destroy();
   
     const temp = JSON.parse(JSON.stringify(config));
     temp.type = type;
   
     const n = Math.min(currentData.values.length, config.data.datasets.length);
     const configDatasets = config.data.datasets.slice(0, n);
   
     if (type === 'line' || type === 'bar') {
       temp.data = {
         labels: currentData.axis,
         datasets: configDatasets.map((ds, i) => ({
           ...ds,
           data: currentData.values[i]?.values || []
         }))
       };
     } else { // pie
       temp.data = {
         labels: configDatasets.map(ds => ds.label),
         datasets: [{
           backgroundColor: configDatasets.map(ds => ds.backgroundColor),
           data: currentData.values.map(v => 
             Array.isArray(v.values) ? v.values.reduce((a, b) => a + b, 0) : 0
           )
         }]
       };
     }
   
     myChart = new Chart(ctx, temp);
   }

注意事项与最佳实践

• ⚠️ 禁止复用 data.datasets 数组引用：Line/Bar 的 datasets 是多个对象，Pie 的 datasets 是单个对象数组，结构本质不同，不可混用。
• ⚠️ 始终校验数据存在性：对 currentData.values[i]、v.values 等嵌套属性使用可选链（?.）或三元判断。
• ✅ 推荐封装为 React/Vue 组件：将 myChart 实例、currentDataIndex、type 等状态交由框架管理，useEffect 中控制销毁与重建。
• ✅ 性能优化（可选）：若数据量极大且切换频繁，可缓存各类型下的 data 结构，避免重复计算，但需确保缓存与当前 type/data 严格同步。

通过遵循“销毁→深拷贝→类型化重构→新建”的四步范式，即可彻底规避 Chart.js 类型切换的经典陷阱，构建出鲁棒、可维护的动态图表系统。