Chart.js如何实现X值随机不匹配的堆叠面积图

• 业务中使用chart-js-react构建面积图，展示时间维度的日志类数据，单条数据格式为{x:"2022-06-27T21:00:00Z", y:25}。
• 异常现象：各数据点的时间值为随机生成，当多个数据序列的X轴（时间戳）取值不一致时，若某条序列缺失对应位置的X轴时间戳，图表会出现区域重叠、空白填充的问题，异常效果如下：
  
• 排查过程：核查官方Issue后确认，公开记录的X值缺失/不一致场景未覆盖随机X值情况；自行构造X值不匹配的测试用例可稳定复现异常。为简化问题演示，构造X值为实数的模拟测试数据复现问题。
• 核心诉求：在X值为随机不匹配值的场景下，正确实现堆叠效果的面积图，复现代码如下：

d0 = [{x:1, y:1}, {x:2, y:11},{x:3, y:1},{x:4, y:11},{x:5, y:10}, {x:6, y:8},{x:7, y:15},{x:8, y:2}]
      
d1= [{x:1, y:1}, {x:2, y:5}, {x:4, y:1}, {x:5, y:3}, {x:5.5, y:4},{x:7, y:5},{x:8, y:3}]

const ctx = document.getElementById("chart").getContext("2d");
const chart = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [
      {
        backgroundColor: "rgba(50,200,50,0.6)",
        borderColor: "rgba(50,200,50,0.6)",
        data: d0,
        fill: "stack"
      },
      {
        backgroundColor: "rgba(200,50,50,0.6)",
        borderColor: "rgba(200,50,50,0.6)",
        data: d1,
        fill: "stack"
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: "linear"
      },
      y: {
        stacked: true,
      }
    },
    elements: {
      line: {
         tension: 0.2
      },
      point: {
        radius: 0
      }
    },
    tooltips: {
      mode: "nearest",
      intersect: false,
      axis: "x"
    },
    hover: {
      mode: "nearest",
      intersect: false,
      axis: "x"
    }
  }
});

Chart.js堆叠面积图的默认计算逻辑是仅在各数据集共同存在的X坐标点执行Y值堆叠累加，当某一数据集在指定X坐标下无对应数据点时，框架不会自动做插值补全，填充区域直接沿线段路径绘制，最终出现重叠、空白错位问题。

核心思路是数据预处理对齐所有数据集的X轴坐标，步骤如下：

1. 提取全量X值：遍历所有数据集，收集全部出现过的X值，去重后按从小到大排序，得到统一的X轴坐标列表。
2. 插值补点：对每个数据集，遍历统一X轴列表，若该X值不存在于当前数据集，则通过线性插值计算该位置对应的Y值，补入数据集，保证所有数据集的X轴坐标完全对齐。
3. （可选）自定义交互逻辑：补点时可给插值生成的点添加自定义标记，在tooltip回调中过滤插值点，避免展示非真实采集的数据。

核心预处理代码示例：

/**
 * 线性插值计算指定X位置的Y值
 * @param {number} x 目标X坐标
 * @param {Array<{x:number,y:number}>} points 原始数据点集合
 * @returns {number} 插值得到的Y值
 */
function getInterpolationY(x, points) {
  const sortedPoints = [...points].sort((a, b) => a.x - b.x);
  // 边界值直接返回端点Y值
  if (x <= sortedPoints[0].x) return sortedPoints[0].y;
  if (x >= sortedPoints.at(-1).x) return sortedPoints.at(-1).y;
  // 查找目标X相邻的两个真实点计算插值
  for (let i = 0; i < sortedPoints.length - 1; i++) {
    const prev = sortedPoints[i];
    const next = sortedPoints[i + 1];
    if (x >= prev.x && x <= next.x) {
      const offsetRatio = (x - prev.x) / (next.x - prev.x);
      return prev.y + offsetRatio * (next.y - prev.y);
    }
  }
  return 0;
}

// 1. 收集所有X值并排序
const allXSet = new Set();
d0.forEach(point => allXSet.add(point.x));
d1.forEach(point => allXSet.add(point.x));
const sortedAllX = Array.from(allXSet).sort((a, b) => a - b);

// 2. 补全每个数据集的点
const processedD0 = sortedAllX.map(x => {
  const realPoint = d0.find(p => p.x === x);
  return realPoint || {
    x,
    y: getInterpolationY(x, d0),
    isInterpolated: true // 标记为插值点
  };
});
const processedD1 = sortedAllX.map(x => {
  const realPoint = d1.find(p => p.x === x);
  return realPoint || {
    x,
    y: getInterpolationY(x, d1),
    isInterpolated: true
  };
});

// 3. 将processedD0、processedD1替换原有d0、d1传入Chart.js配置即可

适配说明 #

• 时间轴场景下，只需将时间字符串转为时间戳数值，复用上述插值逻辑处理即可，处理完成后无需额外修改X轴配置。
• 若不需要曲线平滑效果，可将配置中elements.line.tension设为0，展示效果更规整；若保留曲线平滑，只要X轴插值点密度足够，填充错位问题会完全消失。

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