Chart.js折线图数据赋值错误 渲染两条折线问题排查

我有一个对象数组，想要为Chart.js中的折线图创建对应数据集，但最终得到的数据集存在错误，实际渲染出了两条折线而非预期的单条折线，相关实现代码如下：

const data = [{May 04: '', May 05: '1', May 06: ''}, {May 04: '2', May 05: '', May 06: ''}]

const chartData = {
          labels: ['May 04', 'May 05', 'May 06' ]
          datasets: getDataSet(data),
        };

const getDataSet = (data) => {
  const dataSet = [];


  dataSet.push({ label: 'Total' });
  data.forEach((v) => {
  dataSet.push({
    data: Object.values(v),
  });
})
  return dataSet;
};

代码存在三处核心问题，直接导致渲染结果不符合预期：

• 数据集生成逻辑错误：getDataSet首先向数组中推入了一个仅带label字段、无data属性的空配置（该配置会被Chart.js直接忽略，不会渲染折线），之后遍历长度为2的原始data数组，每遍历一个对象就新增一个独立数据集，最终实际生效的数据集共2个，对应渲染出两条折线。
• 数据合并逻辑缺失：你预期是将两个对象中同日期的数值汇总为单条折线的数据源，但实际代码将每个对象单独作为一条线的数据源，每个对象仅对应一个日期有有效数值，其余为空，最终两条折线各只有1个有效数据点。
• 语法细节问题：原代码中chartData内labels属性末尾缺少逗号，会触发语法报错，运行时需要先补全。

只需要保留1个数据集，按标签顺序遍历所有原始对象，提取对应日期的有效值拼成单条线的data数组即可：

const data = [{May 04: '', May 05: '1', May 06: ''}, {May 04: '2', May 05: '', May 06: ''}]

const chartData = {
  labels: ['May 04', 'May 05', 'May 06'],
  datasets: getDataSet(data),
};

const getDataSet = (data) => {
  const singleDataset = {
    label: 'Total',
    data: []
  };
  // 按标签顺序收集每个日期的有效值
  chartData.labels.forEach(dateLabel => {
    let targetVal = '';
    for (const record of data) {
      if (record[dateLabel] !== '') {
        targetVal = record[dateLabel];
        break;
      }
    }
    singleDataset.data.push(targetVal);
  });
  // datasets字段要求为数组类型，返回包裹后的结果
  return [singleDataset];
};

修复后生成的数据集data值为['2', '1', '']，和标签一一对应，仅会渲染1条符合预期的折线。

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