本文详解如何在 Chart.js 中安全、可靠地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 Cannot read properties of undefined 错误及类型切换后渲染异常问题，核心在于销毁旧实例、深拷贝配置、按类型精准重建数据结构。
本文详解如何在 chart.js 中安全、可靠地动态切换图表类型（line/bar/pie），解决因数据结构不匹配导致的 `cannot read properties of undefined` 错误及类型切换后渲染异常问题，核心在于销毁旧实例、深拷贝配置、按类型精准重建数据结构。
在使用 Chart.js 构建可交互式多类型图表时，开发者常期望通过按钮一键切换 line、bar 或 pie 类型，并支持不同维度的数据源（如不同时间轴长度、不同数据集数量）。但直接复用同一 Chart 实例并仅修改 chart.config.type 并无法保证正确性——Chart.js 内部状态（如 scales、axes、layout 逻辑）与图表类型强耦合，强行变更会导致数据映射错乱、标签错位，甚至抛出类似 “Cannot read properties of undefined (reading ‘values’)” 的运行时错误。
根本原因在于：Pie 图完全不需要 x/y 轴，其 data.labels 对应的是数据集名称，而 data.datasets[0].data 是各数据集的聚合值；而 line/bar 图则依赖共享的 labels（横轴）和每个数据集独立的 data 数组（纵轴值）。二者数据结构本质不同，不可混用。
✅ 正确做法是：每次切换类型或数据源时，彻底销毁旧图表实例，并基于当前类型 + 当前数据，从零构建全新配置对象。 以下是经过验证的生产级实现方案：
1. 配置模板与数据源分离
定义一个基础配置模板（不含 data 和 type），所有样式、交互选项在此统一维护；数据源则以结构化 json 形式组织，确保字段语义清晰（如 axis 表示横轴标签，values 是数据集数组）：
// 基础配置模板（不含 data 和 type） const baseConfig = { options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: true }, tooltip: { enabled: true } } }, 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 } ] } }; // 多组测试数据（结构统一：axis + values[]） const dataSources = [ { axis: ["June","July","Aug"], values: [{id:1,values:[1,2,3]}, {id:2,values:[4,5,6]}] }, { axis: ["Mon","Tue","Wed"], values: [{id:0,values:[10,12,11]}] } // 支持单数据集 ];2. 类型感知的数据映射逻辑
在 mixDataConfig() 函数中，根据 type 分支处理数据结构，严格遵循每种类型的 Schema 要求：
function mixDataConfig(newType, currentData) { const ctx = document.getElementById("canvas").getContext("2d"); // ✅ 关键步骤：销毁旧实例，释放内存与事件监听器 if (myChart) myChart.destroy(); // ✅ 深拷贝避免引用污染（JSON.parse/stringify 适用于纯数据对象） const config = JSON.parse(JSON.stringify(baseConfig)); config.type = newType; const n = Math.min(currentData.values.length, config.data.datasets.length); const datasets = config.data.datasets.slice(0, n); if (newType === "line" || newType === "bar") { // Line/Bar：共享 labels，每个 dataset.data = 对应 values[i].values config.data.labels = currentData.axis; config.data.datasets = datasets.map((ds, i) => ({ ...ds, data: currentData.values[i]?.values || [] })); } else if (newType === "pie") { // Pie：labels = dataset labels，data = 各 dataset 的 values 总和 config.data.labels = datasets.map(ds => ds.label); config.data.datasets = [{ backgroundColor: datasets.map(ds => ds.backgroundColor), data: currentData.values.map(v => Array.isArray(v.values) ? v.values.reduce((a, b) => a + b, 0) : 0 ) }]; } myChart = new Chart(ctx, config); }3. 使用示例与注意事项
// 绑定按钮事件 $("#line, #bar, #pie").on("click", function() { const type = $(this).attr("id"); mixDataConfig(type, dataSources[currentIndex]); }); // 切换数据源（自动适配当前类型） $("#switch").on("click", () => { currentIndex = (currentIndex + 1) % dataSources.length; mixDataConfig(myChart?.config.type || "line", dataSources[currentIndex]); });⚠️ 关键注意事项：
- 永远调用 chart.destroy()：这是避免内存泄漏和事件冲突的强制要求；
- 深拷贝必须到位：若配置含函数（如 options.plugins.tooltip.callbacks），需改用 structuredClone 或 Lodash cloneDeep；
- 数据容错处理：使用可选链 v.values?.reduce(…) 防止 undefined 报错；
- Pie 图无 fill/borderColor 意义：其 backgroundColor 直接控制扇区颜色，无需设置 borderColor；
- 响应式建议：在 <canvas> 外层包裹固定尺寸容器，避免 responsive: true 在 dom 变更时布局抖动。
通过以上设计，图表可在任意类型间无缝切换，且每次渲染都基于干净、类型专属的数据结构，彻底规避了原始问题中的各类异常。此模式也易于扩展至 doughnut、radar 等其他类型，只需补充对应的数据映射逻辑即可。