本文详解如何在 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 或直接更新 chart.data。这种做法极易引发状态污染：例如 Pie 图依赖扁平化的单数据集结构（[{data: [sum1, sum2, ...]}]），而 Line/Bar 图需保留多数据集 + 时间轴标签结构（labels: [...], datasets: [{data: [...]}, ...]）。若未彻底重置，残留字段（如 datasets[0].data.values）将导致运行时错误 —— 如题中 Uncaught TypeError: Cannot read properties of undefined (reading 'values')。
✅ 正确解法：每次类型或数据变更时，销毁旧实例并全新初始化。以下是经过验证的完整实现逻辑：
1. 配置模板与数据源分离
定义标准化的数据结构（如 axis 数组 + values 对象数组），并维护一个纯净的 config 模板（不含 data 和 type）：
const configTemplate = {
type: 'line', // 占位值，实际由 mixDataConfig 覆盖
data: { datasets: [
{ label: 'company1', borderColor: 'purple', backgroundColor: 'purple' },
{ label: 'company2', borderColor: 'green', backgroundColor: 'green' },
{ label: 'company3', borderColor: 'red', backgroundColor: 'red' }
]},
options: { responsive: true }
};
const dataSources = [
{ axis: ["June","July",...], values: [{id:1,values:[1,1,2,...]},...] },
// 其他数据源...
];2. 类型切换主函数：安全重建图表
关键点：
- ✅ 强制销毁旧实例：myChart?.destroy() 清除所有事件监听和 DOM 引用；
- ✅ 深拷贝配置：JSON.parse(JSON.stringify(configTemplate)) 避免引用污染；
- ✅ 按类型分支构建 data 结构，严格匹配 Chart.js 要求：
function mixDataConfig() {
const currentData = dataSources[currentIndex];
const ctx = document.getElementById('canvas').getContext('2d');
// 1. 销毁旧图表
if (myChart) myChart.destroy();
// 2. 深拷贝配置模板
const config = JSON.parse(JSON.stringify(configTemplate));
config.type = chartType; // line / bar / pie
// 3. 按类型构建 data
if (chartType === 'line' || chartType === 'bar') {
config.data.labels = currentData.axis;
config.data.datasets = config.data.datasets
.slice(0, currentData.values.length) // 截取匹配数据集数量
.map((ds, i) => ({
...ds,
data: currentData.values[i].values // 直接赋值数值数组
}));
}
else if (chartType === 'pie') {
// 饼图：标签 = 数据集名，数据 = 各数据集总和
config.data.labels = config.data.datasets.map(ds => ds.label);
config.data.datasets = [{
backgroundColor: config.data.datasets.map(ds => ds.backgroundColor),
data: currentData.values.map(v => v.values.reduce((a, b) => a + b, 0))
}];
}
// 4. 创建新实例
myChart = new Chart(ctx, config);
}3. 注意事项与最佳实践
- ⚠️ 禁止复用 datasets 引用：config.data.datasets 必须每次重新构造，不可在原对象上 .push() 或修改 data 属性；
- ⚠️ 数据长度校验：切换数据源时（如 data3 仅含 1 个数据集），需用 .slice(0, n) 截取对应数量的配置项，避免 currentData.values[i] 为 undefined；
- ⚠️ 颜色一致性：Pie 图的 backgroundColor 数组长度必须与 data 长度一致，否则出现默认色块；
- ? 性能提示：高频切换场景可预生成各类型配置对象缓存，但需确保数据深拷贝；
- ? 切勿使用 chart.update()：该方法不支持 type 变更，仅用于数据/选项微调。
通过上述模式，无论切换至 Line、Bar 还是 Pie，图表均能精准还原其原始形态 —— Line/Bar 保持多系列时间序列视图，Pie 则正确聚合为占比分布，彻底规避状态错乱问题。
