本文详解如何在 Chart.js 中安全、稳定地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 Cannot read properties of undefined 错误及类型切换后渲染错乱问题，核心在于销毁旧实例、深拷贝配置、按类型精准重建数据结构。
本文详解如何在 chart.js 中安全、稳定地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 `cannot read properties of undefined` 错误及类型切换后渲染错乱问题，核心在于销毁旧实例、深拷贝配置、按类型精准重建数据结构。
在使用 Chart.js 构建可交互数据看板时，常需支持用户自由切换图表类型（如从饼图切换回折线图），同时兼容不同维度、长度和结构的数据源（如 data3 中仅含单个数据集且标签名含 "Thursday2"）。但直接复用同一 Chart 实例并仅修改 chart.config.type 或粗暴更新 data 属性，极易引发以下两类典型问题：
- 数据访问错误：如 Uncaught TypeError: Cannot read properties of undefined (reading 'values')，源于新数据中某 values 字段缺失或嵌套层级不一致，而代码仍尝试访问 dataset.values；
- 渲染逻辑错乱：Pie 图切换回 Line/Bar 后，坐标轴错位、图例异常、数据点重叠——根本原因是 Pie 类型强制将 datasets 压缩为单数组，而 Line/Bar 依赖多数据集 + 共享 labels 的结构，未恢复原始数据形态即重绘，导致 Chart.js 内部状态不一致。
✅ 正确解法是：每次类型或数据变更时，彻底销毁旧实例，基于原始配置模板 + 当前数据 + 目标类型，重新构建全新 Chart 实例。以下是经过生产验证的完整实现逻辑：
1. 配置分离与深拷贝保障纯净性
避免直接修改全局 config 对象。使用 JSON.parse(JSON.stringify()) 进行浅层深拷贝（适用于不含函数/Date/RegExp 的纯配置）：
var temp = JSON.parse(JSON.stringify(config)); temp.type = type; // 动态设置类型
2. 按类型精准构建 data 结构
根据 type 分支处理，确保每种类型的数据结构严格符合 Chart.js 规范：
-
Line / Bar 类型（共享横轴标签）：
temp.data = { labels: currentData.axis, // 如 ["June", "July", ...] datasets: configDatasets.map((dataset, idx) => ({ ...dataset, data: currentData.values[idx]?.values || [] // 安全取值，防 undefined })) }; -
Pie 类型（单数据集，标签=图例项，值=各系列总和）：
temp.data = { labels: configDatasets.map(d => d.label), // ["company1", "company2", ...] datasets: [{ backgroundColor: configDatasets.map(d => d.backgroundColor), data: currentData.values.map(v => Array.isArray(v.values) ? v.values.reduce((a, b) => a + b, 0) : 0 ) }] };
3. 安全销毁与重建（关键！）
必须调用 myChart.destroy() 清理 DOM 事件、动画定时器及内部引用，否则内存泄漏且后续渲染不可控：
if (myChart) {
myChart.destroy(); // ⚠️ 不可省略！
}
myChart = new Chart(ctx, temp);4. 数据健壮性增强（防御式编程）
对 data3 等边缘数据（如 values 数组长度与 datasets 不匹配），添加空值保护：
// 替换原代码中危险的 currentData.values[index].values data: currentData.values[idx]?.values ?? []
总结与最佳实践
- ✅ 永远销毁再创建：Chart.js 不支持跨类型热更新，destroy() + new Chart() 是唯一可靠路径；
- ✅ 配置与数据解耦：config 仅存样式/交互逻辑，dataArr 独立管理原始数据源；
- ✅ 类型分支独立构造：Line/Bar 共享 labels + 多 datasets；Pie 使用 labels 映射图例 + 单 datasets.data 聚合值；
- ✅ 防御性数据访问：所有 ?. 可选链与 ?? 空值合并操作，杜绝 undefined 访问异常；
- ⚠️ 避免 chart.data.datasets = [...] 直接赋值：这会绕过 Chart.js 内部状态机，引发不可预测行为。
通过以上方案，你的图表即可在任意数据源（data0~data3）与任意类型间无缝切换，渲染精准、逻辑清晰、维护性强。
