React Recharts如何通过connectNulls实现空值点位用虚线连接

实现思路 #

原生connectNulls配置只会统一用实线连接所有断点，无法区分样式。我们可以通过拆分数据段、分别绘制普通实线和空值虚线的方式实现需求：

• 先遍历原始数据集，拆分出两类区间：连续存在有效值的区间、前后两个有效值中间夹着null的空值间隔区间
• 对连续有效值区间，正常使用实线绘制折线
• 对空值间隔区间，取区间前后的两个有效值点位，单独用虚线绘制连接线段

代码示例 #

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Customized } from 'recharts';

// 示例原始数据，包含null空值
const rawData = [
  { name: '1月', value: 120 },
  { name: '2月', value: null },
  { name: '3月', value: null },
  { name: '4月', value: 190 },
  { name: '5月', value: 210 },
  { name: '6月', value: null },
  { name: '7月', value: 170 },
];

// 预处理数据，拆分有效段和空值连接对
const processData = (data, key) => {
  const validSegments = [];
  const nullConnectPairs = [];
  let currentSegment = [];
  let lastValidPoint = null;

  data.forEach((item, index) => {
    if (item[key] !== null) {
      currentSegment.push(item);
      if (lastValidPoint && lastValidPoint.index < index - 1) {
        // 上一个有效点和当前有效点中间有空值，加入虚线连接对
        nullConnectPairs.push([lastValidPoint.point, item]);
      }
      lastValidPoint = { point: item, index };
    } else {
      if (currentSegment.length > 0) {
        validSegments.push([...currentSegment]);
        currentSegment = [];
      }
    }
  });
  if (currentSegment.length > 0) {
    validSegments.push(currentSegment);
  }
  return { validSegments, nullConnectPairs };
};

const ChartComponent = () => {
  const { validSegments, nullConnectPairs } = processData(rawData, 'value');
  // 坐标映射函数，根据你的坐标轴配置调整
  const getX = (name, xScale) => xScale(name);
  const getY = (value, yScale) => yScale(value);

  return (
    <LineChart width={600} height={300} data={rawData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      {/* 绘制所有有效段的实线折线 */}
      {validSegments.map((seg, idx) => (
        <Line
          key={`solid-${idx}`}
          data={seg}
          type="monotone"
          dataKey="value"
          stroke="#2196F3"
          strokeWidth={2}
          dot={{ r: 4 }}
          isAnimationActive={false}
        />
      ))}
      {/* 自定义绘制空值段的虚线连接 */}
      <Customized>
        {({ xScale, yScale }) => (
          <g>
            {nullConnectPairs.map((pair, idx) => {
              const x1 = getX(pair[0].name, xScale);
              const y1 = getY(pair[0].value, yScale);
              const x2 = getX(pair[1].name, xScale);
              const y2 = getY(pair[1].value, yScale);
              return (
                <line
                  key={`dashed-${idx}`}
                  x1={x1}
                  y1={y1}
                  x2={x2}
                  y2={y2}
                  stroke="#2196F3"
                  strokeWidth={2}
                  strokeDasharray="5 5"
                />
              );
            })}
          </g>
        )}
      </Customized>
    </LineChart>
  );
};

export default ChartComponent;

多折线适配 #

如果是多折线图表，只需要对每条折线的数据源分别执行上述的预处理逻辑，对应生成各自的实线段和虚线连接即可，可以封装为通用的自定义Line组件复用逻辑。

注意：如果使用了曲线（type为monotone等非线性类型），虚线连接部分可以改用path元素绘制对应曲率的曲线，只需要计算出两个点位之间的曲线路径即可。

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