Chart.js 动态切换图表类型（Line/Bar/Pie）的完整解决方案

本文提供一种稳定、可复用的方式，在 chart.js 中安全地动态切换图表类型（line/bar/pie），并支持任意结构的数据更新，彻底解决因数据格式不匹配或状态残留导致的“undefined values”错误和渲染错乱问题。

在使用 Chart.js 构建交互式仪表盘时，一个常见需求是：同一图表容器能根据用户操作或数据变化，无缝切换为折线图（line）、柱状图（bar）或饼图（pie）。但直接修改 chart.config.type 并调用 chart.update() 往往失败——尤其当数据结构差异大（如 pie 需聚合、line/bar 需多维时间序列）时，极易触发 Cannot read properties of undefined (reading 'values') 等运行时错误，或导致坐标轴错位、图例丢失、颜色错配等视觉异常。

根本原因在于：Chart.js 的内部状态（如 scales、metaData、animation cache）与当前 chart type 强耦合，仅修改 type 字段无法自动重建适配新类型的完整数据结构与配置上下文。正确做法是：每次类型变更或数据更新时，销毁旧实例并创建全新 Chart 实例，同时确保配置生成逻辑严格隔离、按需构造。

以下是经过生产验证的核心实现策略：

✅ 正确做法：销毁 + 重建 + 类型化数据映射

function mixDataConfig() {
  const currentData = dataArr[currentDataIndex];
  const ctx = document.getElementById("canvas").getContext("2d");

  // ✅ 关键步骤1：彻底销毁旧图表（释放事件监听、动画定时器、DOM引用）
  if (myChart) {
    myChart.destroy();
  }

  // ✅ 关键步骤2：基于原始 config 深拷贝（避免引用污染）
  const temp = JSON.parse(JSON.stringify(config));
  temp.type = type;

  // ✅ 关键步骤3：按 type 分支构建 data 属性 —— 完全解耦、互不干扰
  if (type === "line" || type === "bar") {
    // line/bar 共享相同数据结构：labels + 多个 dataset（每个含同长度 data 数组）
    temp.data = {
      labels: currentData.axis,
      datasets: config.data.datasets
        .slice(0, currentData.values.length) // 严格对齐实际数据组数
        .map((dataset, idx) => ({
          ...dataset,
          data: currentData.values[idx].values // 直接赋值，不依赖旧 state
        }))
    };
  } else if (type === "pie") {
    // pie 要求：单 dataset，data 是标量数组，labels 对应各 series 名称
    temp.data = {
      labels: config.data.datasets
        .slice(0, currentData.values.length)
        .map(ds => ds.label),
      datasets: [{
        backgroundColor: config.data.datasets
          .slice(0, currentData.values.length)
          .map(ds => ds.backgroundColor),
        data: currentData.values.map(v => 
          v.values.reduce((sum, val) => sum + val, 0)
        )
      }]
    };
  }

  // ✅ 关键步骤4：创建全新实例（干净的初始化环境）
  myChart = new Chart(ctx, temp);
}

⚠️ 必须规避的陷阱

• ❌ 不要复用旧 config.data.datasets 直接 push/pop：config 是静态模板，其 datasets 长度可能大于当前 currentData.values，必须 slice(0, n) 截断；
• ❌ 不要省略 myChart.destroy()：残留实例会持续监听 resize、hover 等事件，引发内存泄漏及渲染冲突；
• ❌ 不要依赖 chart.data 的实时引用：chart.data 是运行时对象，可能包含已废弃的 meta 信息，务必从原始模板重建；
• ✅ 始终校验数据存在性：如 currentData.values[idx]?.values 可加防御性判断（示例中已隐含通过 slice 保证索引安全）。

? 进阶建议

• 将 mixDataConfig 封装为独立函数，接收 (ctx, configTemplate, currentData, type) 参数，提升可测试性；
• 对 data3 等单 series 数据，slice(0, n) 自动适配，无需特殊分支；
• 若需动画过渡，可在 new Chart() 后调用 myChart.reset() 或配置 options.animation；
• 使用 Chart.register(...) 显式注册所需控制器/元素（如 PieController, ArcElement），避免按需加载导致的类型不可用。

通过这套「销毁-重建-类型专属映射」模式，您将获得完全可控的图表行为：无论从 pie 切回 line，还是加载 axis 长度突变的 data3，都能精准还原目标类型的语义与视觉表现——真正实现灵活、健壮、可维护的动态图表系统。