本文详解如何在 chart.js 中安全、可靠地动态切换图表类型（line/bar/pie），避免因数据结构不匹配导致的 `cannot read properties of undefined` 错误，并确保类型切换后图表渲染逻辑一致、状态可复位。
在使用 Chart.js 构建可交互、多形态的数据可视化组件时，一个常见需求是：支持用户点击按钮实时切换图表类型（如 pie → line → bar）并适配不同结构的数据源。但直接修改 chart.config.type 并调用 chart.update() 往往失败——尤其当饼图（pie）与直角坐标系图表（line/bar）共享同一配置对象时，其 data.labels 与 data.datasets 的组织逻辑存在根本性差异。
✅ 核心原则：销毁重建，而非就地更新
Chart.js 官方明确建议：当图表类型发生本质变化（如 pie ↔ line）时，应销毁旧实例并创建新实例，而非尝试复用配置。原因在于：
- pie 图仅需一个 dataset，且 labels 来自 dataset 的 label 字段；
- line/bar 图则依赖 labels 数组与每个 dataset 的 data 数组严格对齐；
- 混淆二者结构会导致 dataset.data.reduce(...) 访问 undefined.values（如 JSFiddle 中的 data3 报错）。
因此，正确做法是：每次切换类型或数据时，先调用 myChart.destroy() 清理 DOM 绑定与事件监听器，再基于当前类型 + 当前数据，从头构建全新配置对象。
✅ 正确实现：结构化数据映射 + 类型感知配置生成
以下为关键逻辑重构要点（已验证于 JSFiddle 示例）：
1. 数据结构统一约定
所有数据源（data0, data1, data2, data3）均遵循：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
{
axis: string[], // X轴标签（line/bar 用）
values: { id: number, values: number[] }[] // 多个系列，每个含数值数组
}即使 data3 只有一个系列（values.length === 1），也保持结构一致，避免 currentData.values[index] 为 undefined。
2. 配置模板解耦
原始 config 仅定义通用样式（颜色、响应式等），不包含 data 或 type：
const configTemplate = {
data: { datasets: [
{ label: "company1", borderColor: "purple", backgroundColor: "purple" },
{ label: "company2", borderColor: "green", backgroundColor: "green" },
{ label: "company3", label: "company3", borderColor: "red", backgroundColor: "red" }
]},
options: { responsive: true }
};3. 类型专属数据组装逻辑
在 mixDataConfig() 中，根据 type 分支处理：
if (type === "line" || type === "bar") {
// 直角坐标系：labels = axis, 每个 dataset.data = 对应 series.values
temp.data = {
labels: currentData.axis,
datasets: configDatasets.map((dataset, i) => ({
...dataset,
data: currentData.values[i]?.values || [] // 安全访问
}))
};
} else if (type === "pie") {
// 饼图：labels = dataset labels, data = 各 series 总和
temp.data = {
labels: configDatasets.map(d => d.label),
datasets: [{
backgroundColor: configDatasets.map(d => d.backgroundColor),
data: currentData.values.map(s =>
s.values.reduce((sum, v) => sum + v, 0)
)
}]
};
}⚠️ 关键修复点：currentData.values[i]?.values || [] 使用可选链避免 undefined.values 报错；pie 模式下 data 必须是单数组，不可嵌套。
4. 实例生命周期管理
if (myChart) myChart.destroy(); // 彻底释放资源 myChart = new Chart(ctx, temp); // 创建全新实例
✅ 最佳实践总结
| 事项 | 推荐做法 |
|---|---|
| 类型切换 | ✅ 销毁重建；❌ 避免 chart.config.type = 'xxx'; chart.update() |
| 数据兼容性 | ✅ 所有数据源保持 axis + values[] 结构；用 ?. 安全访问 |
| 配置复用 | ✅ configTemplate 仅存样式；data 和 type 每次动态生成 |
| 内存安全 | ✅ destroy() 防止事件重复绑定与内存泄漏 |
| 调试技巧 | 在 mixDataConfig() 开头 console.log({ type, currentData }) 快速定位结构问题 |
通过以上重构，你的图表将稳定支持任意顺序的类型切换（pie → line → bar → pie）及不同长度/维度的数据源切换，彻底规避 Cannot read properties of undefined 等运行时错误。
