如何在ReactJS Recharts散点图中创建仅带边框的空心圆？

完全可以实现，有两种常用的实现方式：

• 基础配置实现（最简单）
  直接给Scatter组件设置填充为透明，同时配置边框相关属性即可，示例代码如下：

import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

// 组件内渲染逻辑
<ScatterChart width={400} height={400} data={你的数据源}>
  <CartesianGrid />
  <XAxis dataKey={'x字段名'} />
  <YAxis dataKey={'y字段名'} />
  <Tooltip />
  <Scatter 
    fill="transparent" 
    stroke="#2563eb" 
    strokeWidth={2}
    dataKey="数值字段名" 
  />
</ScatterChart>

• 自定义形状实现（适合复杂定制需求）
  如果需要对空心圆做更灵活的样式控制，可以自定义散点的渲染形状，示例代码如下：

// 自定义空心圆渲染函数
const CustomHollowCircle = (props) => {
  const { cx, cy, r, stroke, strokeWidth } = props;
  return (
    <circle
      cx={cx}
      cy={cy}
      r={r}
      fill="transparent"
      stroke={stroke || '#2563eb'}
      strokeWidth={strokeWidth || 2}
    />
  );
};

// 组件内使用时给Scatter指定自定义shape
<Scatter
  shape={<CustomHollowCircle />}
  dataKey="数值字段名"
/>

如果需要给不同散点设置不同的边框样式，还可以给stroke、strokeWidth等属性传入回调函数，根据当前数据项动态返回对应值即可。

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