本文详解如何在 chart.js 中安全、稳定地动态切换图表类型（折线图、柱状图、饼图），解决因数据结构不一致导致的 `cannot read properties of undefined` 错误及类型切换后渲染异常问题。
在使用 Chart.js 构建可交互式动态图表时，常见需求是：支持实时切换图表类型（line/bar/pie）并适配不同结构的数据源。但直接复用同一 config 对象并仅修改 type 字段，极易引发两类核心问题：
- 数据结构错位：pie 类型要求 data 是一维数值数组，而 line/bar 需要二维结构（每个 dataset 对应一个时间序列）；若未彻底重置 data.datasets 和 data.labels，切换回 line/bar 时会因残留 pie 结构（如单个 dataset + 无 values 字段）抛出 Cannot read properties of undefined (reading 'values')；
- 实例污染：未销毁旧图表实例即创建新实例，会导致事件监听器堆积、Canvas 渲染冲突、内存泄漏，甚至使后续更新完全失效。
✅ 正确解法是：每次类型/数据变更时，完全销毁旧实例，并基于原始配置模板 + 当前数据 + 当前类型，从零构建全新配置对象。
✅ 关键实践原则
- 永不复用已渲染的 config 对象：使用 JSON.parse(JSON.stringify(template)) 实现深拷贝（适用于纯 JSON 配置；含函数或原型链需用 structuredClone 或自定义克隆）；
-
严格按类型分支构造 data 结构：
- line / bar：labels = axis[]，每个 dataset.data = values[i].values[]；
- pie：labels = dataset.label[]（即系列名），data = [sum(values[0]), sum(values[1]), ...]；
- 强制销毁旧实例：调用 myChart.destroy() 再初始化新实例，避免 Canvas 状态残留；
- 防御性数据访问：对 currentData.values[index]?.values 加空值检查，防止 data3 等极简数据（仅 1 个 series）触发错误。
✅ 完整可运行代码示例
// 基础配置模板（不含 data，仅定义样式/选项）
const configTemplate = {
type: 'line', // 占位符，后续覆盖
data: {
datasets: [
{ label: 'company1', borderColor: 'purple', backgroundColor: 'purple', fill: false },
{ label: 'company2', borderColor: 'green', backgroundColor: 'green', fill: false },
{ label: 'company3', borderColor: 'red', backgroundColor: 'red', fill: false }
]
},
options: {
responsive: true,
plugins: { legend: { display: true } }
}
};
let myChart = null;
let currentDataIndex = 0;
const dataArr = [data0, data1, data2, data3]; // 如题中定义的 data0~data3
let currentType = 'line';
function updateChart(type, data) {
const ctx = document.getElementById('canvas').getContext('2d');
// ? 关键：销毁旧实例
if (myChart) myChart.destroy();
// ? 深拷贝模板，避免污染
const config = JSON.parse(JSON.stringify(configTemplate));
config.type = type;
// ? 按类型构造 data
if (type === 'line' || type === 'bar') {
config.data.labels = data.axis;
config.data.datasets = config.data.datasets
.slice(0, data.values.length)
.map((ds, i) => ({
...ds,
data: data.values[i]?.values || []
}));
} else if (type === 'pie') {
config.data.labels = config.data.datasets.map(ds => ds.label);
config.data.datasets = [{
backgroundColor: config.data.datasets.map(ds => ds.backgroundColor),
data: data.values.map(v => v.values?.reduce((a, b) => a + b, 0) || 0)
}];
}
myChart = new Chart(ctx, config);
}
// 绑定按钮事件
$('#line').click(() => { currentType = 'line'; updateChart('line', dataArr[currentDataIndex]); });
$('#bar').click(() => { currentType = 'bar'; updateChart('bar', dataArr[currentDataIndex]); });
$('#pie').click(() => { currentType = 'pie'; updateChart('pie', dataArr[currentDataIndex]); });
$('#switch').click(() => {
currentDataIndex = (currentDataIndex + 1) % dataArr.length;
updateChart(currentType, dataArr[currentDataIndex]);
});⚠️ 注意事项与最佳实践
- 深拷贝替代方案：若配置含函数（如 options.plugins.tooltip.callbacks.label），JSON.stringify 会丢失函数。此时推荐使用 structuredClone(configTemplate)（现代浏览器支持）或 Lodash 的 _.cloneDeep()；
- 性能优化：高频切换场景下，可预生成各类型配置缓存，避免重复解析；
- 数据校验：在 updateChart 开头添加断言，例如 if (!data || !Array.isArray(data.values)) throw new Error('Invalid data format');；
- 响应式重绘：确保 canvas id="canvas"> 父容器有明确宽高，或启用 responsive: true + maintainAspectRatio: false 防止布局错乱。
通过遵循上述模式，即可实现健壮、可维护的动态图表系统——无论数据维度如何变化、类型如何切换，都能精准还原每种视图应有的语义与形态。
