Chart.js折线图嵌套大数据集卡顿的优化方案咨询

我正在构建一款折线图，需根据不同条件更改线条颜色与背景。由于Chart.js折线图不支持多背景色，我将数据从[{x1, y1},{x2, y2},…]格式嵌套为[[{x1, y1},{x2, y2}],…]格式。该方案在小数据集（200-500个数据点）下运行正常，但在大数据集（2000+个数据点）时会导致页面卡顿。

数据处理代码如下：

const chartData = useMemo(() => {
    const allTimestamps = Array.from(
      new Set(
        data
          ?.map((subArray) => subArray.map((item) => item?.device_timestamp))
          .reduce((acc, curr) => acc.concat(curr), [])
      )
    ).sort((a, b) => a - b);

    const datasets = data?.map((subArray, index) => {
      const salesByTimestamp = subArray.reduce((acc, item) => {
        acc[item?.device_timestamp] = {
          level: item?.level,
          isLowNetwork: item?.isLowNetwork,
          ignition: item?.ignition,
        };
        return acc;
      }, {});

      const alignedData = allTimestamps?.map(
        (timestamp) => salesByTimestamp[timestamp]?.level || null
      );

      return {
        label: `Dataset ${index + 1}`,
        data: alignedData,
        tension: 0,
        fill: true,
        backgroundColor: (context) => {
          const chart = context.chart;
          const { ctx, chartArea } = chart;

          if (!chartArea) {
            // Chart area is undefined on initial render
            return "#f5faff";
          }

          const gradient = ctx.createLinearGradient(
            0,
            chartArea.top,
            0,
            chartArea.bottom
          );
          gradient.addColorStop(0, "#ACD4FD");
          gradient.addColorStop(1, "#F5FAFF");
          return subArray[subArray?.length - 1]?.isLowNetwork
            ? "transparent"
            : gradient;
        },
        spanGaps: true,
        segment: {
          borderColor: (ctx) => {
            const index = ctx.p1DataIndex;
            const timestamp = allTimestamps[index];
            const item = salesByTimestamp[timestamp];

            if (!item) return "transparent";

            if (item.isLowNetwork) {
              return "#9CB1BE";
            }
            return item.ignition ? "#1185FA" : "#FFC86E";
          },
          borderDash: (ctx) => {
            const index = ctx.p1DataIndex;
            const timestamp = allTimestamps[index];
            const item = salesByTimestamp[timestamp];

            return item?.isLowNetwork ? [5, 5] : [5, 0];
          },
        },
        pointBackgroundColor: (context) => {
          if (context?.dataIndex === 0) {
            return "#1185FA";
          }
          return "transparent";
        },
      };
    });

    return {
      labels: allTimestamps,
      datasets,
    };
  }, [data]);

优化方案 #

1. 缓存静态资源与减少重复计算 #

• 缓存渐变背景：当前backgroundColor回调每次渲染都会创建新的渐变对象，大数据集下重复生成开销极高。将渐变创建逻辑移出回调，通过useMemo缓存，仅在图表区域尺寸变化时重新生成：

// 需先获取图表实例的ref
const chartRef = useRef(null);

const gradient = useMemo(() => {
  if (!chartRef.current) return "#f5faff";
  const { ctx, chartArea } = chartRef.current;
  if (!chartArea) return "#f5faff";
  
  const grad = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
  grad.addColorStop(0, "#ACD4FD");
  grad.addColorStop(1, "#F5FAFF");
  return grad;
}, [chartRef.current?.chartArea]);

修改backgroundColor回调直接使用缓存的渐变：

backgroundColor: () => {
  return subArray[subArray?.length - 1]?.isLowNetwork ? "transparent" : gradient;
},

• 预计算Segment样式：segment.borderColor和borderDash回调每次都通过时间戳查找数据对象，重复查找耗时。提前生成与时间戳索引对应的样式数组：

const segmentStyles = allTimestamps.map(timestamp => {
  const item = salesByTimestamp[timestamp];
  if (!item) return { color: "transparent", dash: [5, 0] };
  return {
    color: item.isLowNetwork ? "#9CB1BE" : (item.ignition ? "#1185FA" : "#FFC86E"),
    dash: item.isLowNetwork ? [5, 5] : [5, 0]
  };
});

在Segment配置中直接通过索引获取样式：

segment: {
  borderColor: (ctx) => segmentStyles[ctx.p1DataIndex].color,
  borderDash: (ctx) => segmentStyles[ctx.p1DataIndex].dash,
},

2. 优化数据处理逻辑 #

• 高效生成时间戳集合：原代码使用嵌套map+reduce合并时间戳，效率较低。改用直接遍历的方式填充Set：

const allTimestamps = useMemo(() => {
  const timestampSet = new Set();
  data?.forEach(subArray => {
    subArray.forEach(item => {
      if (item?.device_timestamp) timestampSet.add(item.device_timestamp);
    });
  });
  return Array.from(timestampSet).sort((a, b) => a - b);
}, [data]);

3. 关闭不必要的渲染特性 #

• 精简点渲染：大数据集下点元素会大幅增加渲染压力，仅保留第一个点的可见性，其余点禁用渲染：

pointRadius: (context) => context.dataIndex === 0 ? 4 : 0,
pointHoverRadius: 0,
pointBackgroundColor: (context) => {
  return context.dataIndex === 0 ? "#1185FA" : "transparent";
},

• 启用Chart.js性能配置：在图表选项中关闭不必要的动画，减少重绘开销：

options: {
  animation: false, // 或缩短动画时长：{ duration: 100 }
  responsive: true,
  maintainAspectRatio: false,
  // 其他配置...
}

4. 数据采样与分段加载 #

• 数据降采样：使用LTTB算法对数据点进行降采样，保留核心趋势的同时减少渲染数量，适合2000+数据点的场景。
• 分段加载：仅渲染当前视口内的数据点，结合缩放、滚动事件动态加载对应区间的数据，避免一次性渲染全部数据。

5. 拆分计算粒度 #

将chartData的计算拆分为独立的useMemo块，避免因部分数据变化导致整个数据集重新计算：

const allTimestamps = useMemo(() => {
  // 时间戳生成逻辑
}, [data]);

const datasets = useMemo(() => {
  // 数据集生成逻辑
}, [data, allTimestamps, gradient]);

const chartData = useMemo(() => ({
  labels: allTimestamps,
  datasets
}), [allTimestamps, datasets]);

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