本文详解如何在 chart.js 中安全、可靠地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 `cannot read properties of undefined` 错误及类型切换后渲染异常问题，核心是销毁旧实例 + 深拷贝配置 + 按类型精准重建数据结构。
在使用 Chart.js 构建可交互、多形态的数据可视化组件时，常见的需求是：支持用户自由切换图表类型（如线图 → 饼图 → 柱状图），同时兼容不同结构的数据源（如不同长度的时间轴、不同数量的数据集）。但直接修改 chart.config.type 并调用 chart.update() 往往失败——尤其当从 pie 切回 line/bar 时，因饼图的数据结构（单数据集 + 标签即图例项）与笛卡尔坐标系图表（多数据集 + 共享标签轴）存在根本差异，会导致 undefined.values 报错或图形错乱。
✅ 正确做法是：每次类型变更都彻底销毁旧图表实例，并基于原始配置模板 + 当前数据 + 目标类型，重新构建完整配置对象。以下是关键实践要点：
1. 必须销毁旧实例，避免状态污染
if (myChart) {
myChart.destroy(); // 清除 canvas 绑定、事件监听器、动画定时器等
}⚠️ 切勿复用 chart.data 或 chart.config 对象——Chart.js 内部会缓存布局、缩放、动画等状态，残留状态极易引发 Cannot read properties of undefined (reading 'values') 等错误。
2. 使用深拷贝初始化配置，隔离数据逻辑
原始配置（config）应仅包含通用选项（如 responsive, plugins），不含任何数据：
const config = {
type: 'line', // 默认类型（实际由后续赋值覆盖）
data: { datasets: [/* 模板数据集，仅含样式/label */] },
options: { responsive: true, maintainAspectRatio: false }
};每次重建时，通过 JSON.parse(JSON.stringify(config)) 进行浅层深拷贝（适用于无函数/原型的对象），确保数据结构纯净：
const temp = JSON.parse(JSON.stringify(config)); temp.type = type; // 动态设置类型
3. 按类型精准构建 data 结构（核心逻辑）
-
Line / Bar 图：需共享 labels（X轴），每个 dataset.data 对应一条序列
temp.data = { labels: currentData.axis, // 如 ["June", "July", ...] datasets: currentData.values.map((item, idx) => ({ ...config.data.datasets[idx], // 复用模板样式 data: item.values // 如 [1, 1, 2, 3, ...] })) }; -
Pie 图：labels 来自数据集名称（dataset.label），data 为各数据集总和
temp.data = { labels: config.data.datasets.map(d => d.label), // ["company1", "company2", ...] datasets: [{ backgroundColor: config.data.datasets.map(d => d.backgroundColor), data: currentData.values.map(item => item.values.reduce((sum, val) => sum + val, 0) ) }] };
4. 数据兼容性处理（防 undefined.values 错误）
对 data3 等非对称数据（如仅含 1 个数据集但 config.datasets 有 3 个模板），需截取匹配数量：
const nDatasets = Math.min(currentData.values.length, config.data.datasets.length); const configDatasets = config.data.datasets.slice(0, nDatasets); // 后续 map 时只遍历 nDatasets 个元素
完整调用示例
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;
if (type === 'line' || type === 'bar') {
temp.data = {
labels: currentData.axis,
datasets: currentData.values.map((item, i) => ({
...config.data.datasets[i],
data: item.values
}))
};
} else { // pie
temp.data = {
labels: config.data.datasets.map(d => d.label),
datasets: [{
backgroundColor: config.data.datasets.map(d => d.backgroundColor),
data: currentData.values.map(v => v.values.reduce((a, b) => a + b, 0))
}]
};
}
myChart = new Chart(ctx, temp);
}总结
- ✅ 销毁 > 更新：类型切换必须 destroy() 后新建，这是稳定性的基石。
- ✅ 模板化配置：config 仅存样式/选项，数据完全由当前 currentData 驱动。
- ✅ 类型专属构建：Line/Bar 共享 X 轴；Pie 的 labels 和 data 语义完全不同，不可混用。
- ✅ 边界防御：检查 currentData.values 长度，避免索引越界访问 undefined.values。
遵循以上模式，即可实现任意数据结构下、任意类型间无缝切换的健壮图表组件。
