17370845950

本文详解如何在 chart.js 中安全、稳定地动态切换图表类型（折线图、柱状图、饼图），解决因数据结构不一致导致的 `cannot read properties of undefined` 错误及类型切换后渲染异常问题。

在使用 Chart.js 构建可交互式动态图表时，常见需求是：支持实时切换图表类型（line/bar/pie）并适配不同结构的数据源。但直接复用同一 config 对象并仅修改 type 字段，极易引发两类核心问题：

1. 数据结构错位：pie 类型要求 data 是一维数值数组，而 line/bar 需要二维结构（每个 dataset 对应一个时间序列）；若未彻底重置 data.datasets 和 data.labels，切换回 line/bar 时会因残留 pie 结构（如单个 dataset + 无 values 字段）抛出 Cannot read properties of undefined (reading 'values')；
2. 实例污染：未销毁旧图表实例即创建新实例，会导致事件监听器堆积、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 防止布局错乱。

通过遵循上述模式，即可实现健壮、可维护的动态图表系统——无论数据维度如何变化、类型如何切换，都能精准还原每种视图应有的语义与形态。