如何为MUI X折线图实现曲线平滑效果？

一、MUI X Charts 内置平滑方案 #

MUI X Charts的折线图本身提供了两种无需修改原始数据的内置平滑方式：

1. 贝塞尔曲线连接（line="curve"） #

在折线系列配置中添加line: "curve"，会用自然贝塞尔曲线连接数据点，直接实现平滑效果：

{
  type: 'line',
  data: LinePoints,
  label: 'test1',
  line: "curve" // 启用贝塞尔曲线平滑
}

2. 张力控制（tension） #

通过tension属性调整曲线平滑度，取值范围为0到1，值越大曲线越平滑（推荐0.4-0.8区间）：

{
  type: 'line',
  data: LinePoints,
  label: 'test1',
  tension: 0.6 // 调整张力值
}

二、自定义数据平滑算法（微调数据点） #

如果内置方案无法满足需求，可以用Catmull-Rom样条插值算法生成更自然的平滑数据点，替换你当前的createSmoothCurve函数：

function createSmoothCurve(x, y) {
  if (x.length !== y.length) {
    throw new Error('x和y数组长度必须一致');
  }
  if (x.length < 2) return [x, y];

  const points = x.map((xi, i) => ({ x: xi, y: y[i] }));
  const granularity = 10; // 插值密度，值越大曲线越细腻
  const smoothX = [];
  const smoothY = [];

  // Catmull-Rom样条插值计算
  function catmullRom(p0, p1, p2, p3, t) {
    const t2 = t * t;
    const t3 = t2 * t;
    return {
      x: 0.5 * ((2 * p1.x) + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3),
      y: 0.5 * ((2 * p1.y) + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3)
    };
  }

  // 添加第一个原始点
  smoothX.push(points[0].x);
  smoothY.push(points[0].y);

  // 生成插值点
  for (let i = 0; i < points.length - 1; i++) {
    const p0 = i === 0 ? points[0] : points[i - 1];
    const p1 = points[i];
    const p2 = points[i + 1];
    const p3 = i === points.length - 2 ? points[i + 1] : points[i + 2];

    for (let j = 1; j <= granularity; j++) {
      const t = j / granularity;
      const point = catmullRom(p0, p1, p2, p3, t);
      smoothX.push(point.x);
      smoothY.push(point.y);
    }
  }

  return [smoothX, smoothY];
}

在组件中使用平滑后的数据：

// 注意参数顺序：x轴为Time，y轴为LinePoints
const [smoothX, smoothY] = createSmoothCurve(Time, LinePoints);

// ...在Container配置中替换数据
<Container
  series={[
    // 散点配置保留
    {
      type: 'line',
      data: smoothY, // 使用平滑后的y数据
      label: 'test1',
    },
  ]}
  xAxis={[
    {
      data: smoothX, // 使用平滑后的x数据
      id: 'x-axis-id',
    },
  ]}
  // 其他配置保留
>

注意事项 #

• 优先使用内置方案，无需修改数据且性能更优；
• 自定义算法可调整granularity平衡平滑度与性能；
• 确保Time数组按递增顺序排列，避免插值异常。

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