React Native/Expo中基于X-Y坐标点绘制折线/贝塞尔图的方案咨询

针对你需要基于[[x1,y1],[x2,y2],...]格式坐标数据绘制对应X-Y折线/贝塞尔曲线的需求，以下是两种可靠方案：

方案一：基于react-native-svg自定义实现（最灵活） #

react-native-svg本身完全支持自定义绘制，之前未正常工作可能是未做好坐标映射。这种方式能完全控制每个点的位置，支持单条/多条折线、贝塞尔曲线。

1. 安装依赖（Expo环境） #

expo install react-native-svg

2. 坐标转换工具函数 #

原始数据的X/Y值可能不在SVG画布范围内，需要先将数据映射到画布的可视区域：

const transformPoints = (allPoints, width, height, padding = 40) => {
  const xs = allPoints.flat().map(p => p[0]);
  const ys = allPoints.flat().map(p => p[1]);
  const minX = Math.min(...xs);
  const maxX = Math.max(...xs);
  const minY = Math.min(...ys);
  const maxY = Math.max(...ys);

  // 将数据坐标映射到SVG画布坐标（注意SVG Y轴向下，需反转Y值）
  return (points) => points.map(([x, y]) => ({
    x: padding + ((x - minX) / (maxX - minX)) * (width - 2 * padding),
    y: padding + ((maxY - y) / (maxY - minY)) * (height - 2 * padding)
  }));
};

3. 单条折线/贝塞尔曲线组件 #

import { View } from 'react-native';
import Svg, { Polyline, Circle, Line, Text, Path } from 'react-native-svg';

// 生成贝塞尔曲线路径
const createBezierPath = (points) => {
  if (points.length < 2) return '';
  let path = `M ${points[0].x} ${points[0].y}`;
  for (let i = 0; i < points.length - 1; i++) {
    const p1 = points[i];
    const p2 = points[i + 1];
    // 用中点作为控制点实现平滑曲线
    const ctrlX = (p1.x + p2.x) / 2;
    const ctrlY = (p1.y + p2.y) / 2;
    path += ` Q ${ctrlX} ${ctrlY}, ${p2.x} ${p2.y}`;
  }
  return path;
};

const CustomChart = ({ data, width, height, isBezier = false }) => {
  const transform = transformPoints([data], width, height);
  const transformedPoints = transform(data);
  const [minX, maxX] = [Math.min(...data.map(p => p[0])), Math.max(...data.map(p => p[0]))];
  const [minY, maxY] = [Math.min(...data.map(p => p[1])), Math.max(...data.map(p => p[1]))];

  return (
    <View>
      <Svg width={width} height={height}>
        {/* 坐标轴 */}
        <Line x1={40} y1={height - 40} x2={width - 40} y2={height - 40} stroke="#333" strokeWidth={2} />
        <Line x1={40} y1={40} x2={40} y2={height - 40} stroke="#333" strokeWidth={2} />
        {/* 轴标签 */}
        <Text x={width / 2} y={height - 15} textAnchor="middle" fontSize={12}>{`X: ${minX} - ${maxX}`}</Text>
        <Text x={15} y={height / 2} textAnchor="middle" fontSize={12} transform="rotate(-90 15, 150)">{`Y: ${minY} - ${maxY}`}</Text>
        {/* 折线/贝塞尔曲线 */}
        {isBezier ? (
          <Path d={createBezierPath(transformedPoints)} fill="none" stroke="#2196F3" strokeWidth={2} />
        ) : (
          <Polyline points={transformedPoints.map(p => `${p.x},${p.y}`).join(' ')} fill="none" stroke="#2196F3" strokeWidth={2} />
        )}
        {/* 数据点 */}
        {transformedPoints.map((p, idx) => (
          <Circle key={idx} cx={p.x} cy={p.y} r={4} fill="#FF5722" />
        ))}
      </Svg>
    </View>
  );
};

4. 多条折线组件扩展 #

只需要传入数据集数组，循环渲染每条曲线即可：

const MultiLineChart = ({ datasets, width, height, colors = ['#2196F3', '#FF5722', '#4CAF50'] }) => {
  const transform = transformPoints(datasets, width, height);

  return (
    <View>
      <Svg width={width} height={height}>
        {/* 坐标轴 */}
        <Line x1={40} y1={height - 40} x2={width - 40} y2={height - 40} stroke="#333" strokeWidth={2} />
        <Line x1={40} y1={40} x2={40} y2={height - 40} stroke="#333" strokeWidth={2} />
        {/* 每条折线 */}
        {datasets.map((data, idx) => {
          const points = transform(data).map(p => `${p.x},${p.y}`).join(' ');
          return (
            <Polyline key={idx} points={points} fill="none" stroke={colors[idx % colors.length]} strokeWidth={2} />
          );
        })}
        {/* 所有数据点 */}
        {datasets.map((data, dsIdx) => {
          const transformed = transform(data);
          return transformed.map((p, ptIdx) => (
            <Circle key={`${dsIdx}-${ptIdx}`} cx={p.x} cy={p.y} r={3} fill={colors[dsIdx % colors.length]} />
          ));
        })}
      </Svg>
    </View>
  );
};

方案二：修复victory-native的使用方式 #

如果倾向于用现成库，victory-native未正常工作大概率是未配置线性X轴，默认会把X值当作分类标签。只需添加scale={{ x: 'linear' }}即可：

import { VictoryChart, VictoryLine, VictoryAxis } from 'victory-native';

const VictoryCustomChart = ({ data }) => {
  // 转换数据格式为victory需要的{x, y}对象数组
  const formattedData = data.map(([x, y]) => ({ x, y }));
  
  return (
    <VictoryChart
      scale={{ x: 'linear', y: 'linear' }} // 关键：设置X轴为线性刻度
      domainPadding={{ x: 20, y: 20 }}
      width={350}
      height={250}
    >
      <VictoryAxis dependentAxis />
      <VictoryAxis />
      <VictoryLine data={formattedData} style={{ data: { stroke: '#2196F3' } }} />
    </VictoryChart>
  );
};

多条折线只需添加多个VictoryLine组件即可。

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