Recharts散点图（Scatterplot）如何为单个数据点设置指定填充颜色

初始代码的核心错误 #

你最初的代码里所有<Cell>的fill都绑定了同一个colorType变量，没有读取当前遍历到的单条数据里的颜色字段，自然所有点都用同一个颜色。只需要把fill的取值改成当前循环项的colourType即可。

修改后仍全同色的排查方案 #

按优先级从高到低排查：

• 首先校验数据集字段是否正确
  打印每条数据的colourType值，确认两个点：1. 每条数据的字段名确实是colourType（注意拼写，别和美式拼写colorType混淆）；2. 各条数据的颜色值确实不相同。如果字段名匹配失败，所有点都会命中fallback的#8884d8，自然全同色。

  {data.map((entry, index) => {
    console.log(`第${index}个点的颜色：`, entry.colourType)
    return <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
  })}
  

• 检查样式覆盖问题
  打开浏览器开发者工具，选中任意散点对应的<circle>元素，查看计算属性中的fill值来源，确认是否有全局CSS强制覆盖了circle的填充颜色。
• 升级Recharts版本
  部分较低版本的Recharts对Scatter组件的<Cell>支持存在缺陷，升级到最新稳定版即可解决：

  # npm用户执行
  npm update recharts
  # yarn用户执行
  yarn upgrade recharts
  

• 替换实现方案
  也可以直接用Scatter的fill属性传回调函数的写法，无需手动生成Cell，写法更简洁：

  <Scatter 
    name="A school" 
    data={data}
    fill={(entry) => entry.colourType ?? "#8884d8"}
  />
  

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