Chart.js 如何生成由其他所有折线数据逐点求和得到的新折线？

实现思路 #

• 先初始化一个空对象用于按日期累加Y值
• 遍历所有现有数据集的所有数据点，将相同X（日期）对应的Y值相加
• 最后将累加对象转换为Chart.js折线图要求的[{x: 日期, y: 总和}]格式

代码实现 #

如果你需要合并相同日期的Y值（常规折线图需求，同一X轴刻度仅显示一个总和点）：

// 假设你的现有数据集存在变量 datasets 中，对应Chart.js配置里的datasets数组
const sumMap = {};

// 遍历所有数据集
datasets.forEach(dataset => {
  // 遍历当前数据集的所有数据点
  dataset.data.forEach(point => {
    const xVal = point.x;
    // 该日期无记录时先初始化为0
    if (!sumMap[xVal]) sumMap[xVal] = 0;
    // 累加Y值
    sumMap[xVal] += point.y;
  });
});

// 转换为目标数据格式
const sumLineData = Object.entries(sumMap).map(([x, y]) => ({x, y}));

如果你需要保留相同日期的多个数据点（匹配你给出的示例中2021-09-08存在两个点的情况，按数据点索引对齐累加）：

const sumLineData = [];
// 取所有数据集的最大数据点长度，避免漏点
const maxPointCount = Math.max(...datasets.map(d => d.data.length));

for (let i = 0; i < maxPointCount; i++) {
  let totalY = 0;
  let currentX = null;
  datasets.forEach(dataset => {
    if (dataset.data[i]) {
      totalY += dataset.data[i].y;
      // 取首个数据集对应索引的X作为当前点的X，需确保所有数据集同索引的X值一致
      if (!currentX) currentX = dataset.data[i].x;
    }
  });
  sumLineData.push({x: currentX, y: totalY});
}

集成到Chart.js配置 #

生成sumLineData后直接新增数据集到原有配置即可：

datasets.push({
  label: '数值总和',
  data: sumLineData,
  borderColor: '#ff3d00',
  fill: false,
  tension: 0.1
});

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