ChartJS图表类型切换异常及数据更新报错问题求助

问题1：非标准数据结构更新时报错 #

报错Uncaught TypeError: Cannot read properties of undefined (reading 'values')是因为data3的数据集结构和其他数据不一致，代码里直接访问了未定义的values字段。解决思路是统一数据格式，做不同结构的兼容处理：

在更新图表的函数里，先对传入的数据做标准化处理，兼容不同字段名：

function updateChart(newData, newType) {
  // 标准化数据，兼容data3这类特殊结构
  const normalizedData = {
    labels: newData.labels || [],
    datasets: (newData.datasets || []).map(dataset => {
      return {
        label: dataset.label || '',
        backgroundColor: dataset.backgroundColor || '',
        data: dataset.data || dataset.values || [] // 同时支持data和values字段
      };
    })
  };

  let temp = { ...chart.config };
  temp.type = newType;
  temp.data = { ...normalizedData };

  // 后续类型转换逻辑...
}

问题2：切换饼图后无法恢复正常图表 #

当前切换饼图时直接修改了数据结构（把多数据集合并成单数据集，替换labels为数据集名称），切回折线/柱状图时，原始的标签和多数据集结构已经丢失。解决方法是始终基于原始标准化数据做类型转换，不直接修改当前图表的修改后数据：

修改饼图的转换逻辑，同时适配轴配置（饼图不需要坐标轴）：

// 接上面的标准化代码
if (newType === "pie") {
  temp.data.labels = normalizedData.datasets.map(ds => ds.label);
  temp.data.datasets = [{
    backgroundColor: normalizedData.datasets.map(ds => ds.backgroundColor),
    data: normalizedData.datasets.map(ds => ds.data.reduce((a, b) => a + b, 0))
  }];
  // 移除坐标轴配置，适配饼图
  temp.options.scales = {};
} else {
  // 非饼图时直接用原始标准化数据，恢复坐标轴
  temp.data = { ...normalizedData };
  temp.options.scales = {
    x: { display: true },
    y: { display: true }
  };
}

// 更新图表
chart.destroy();
chart = new Chart(document.getElementById('myChart'), temp);

这样修改后：

• 不管传入哪种结构的数据，都会先统一成ChartJS能识别的格式，避免属性未定义报错；
• 切换饼图时基于原始数据生成饼图所需结构，切回其他类型时直接用原始数据，不会丢失原有结构；
• 同步处理坐标轴配置，避免饼图的轴残留导致显示异常。

内容的提问来源于stack exchange，提问作者Lino