重新绘制散点图，为特定值设置颜色？答案

【问题标题】：recharts scatterplot, set colour for specific value?重新绘制散点图，为特定值设置颜色？
【发布时间】：2021-08-25 09:07:46
【问题描述】：

我正在尝试为进入 recharts 散点图中的值设置特定颜色。

我尝试这样做的方式如下，

<Scatter name="A school" data={data} fill="#8884d8">
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={colorType} />
        ))}
      </Scatter>

进入这个的数据集看起来像这样，

const data = [{x:10,y:50,colourType:"#FFBB28"},..]

目前它正在采用其中一种颜色类型并将其应用于每个值。关于如何使其仅适用于单点的任何想法？

谢谢。

##更新

不幸的是，当我应用下面的日志时，颜色仍然总是一样。

这是组件的总和。

 <ScatterChart
      width={500}
      height={400}
      margin={{
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
      }}
    >
      <CartesianGrid />
      <XAxis
        type="number"
        domain={[0, 60]}
        dataKey="x"
        name="Speed"
        unit=" Seconds"
        reversed
      />
      <YAxis
        type="number"
        domain={[0, 100]}
        dataKey="y"
        name="Accuracy"
        unit="%"
      />
      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
      <Scatter name="A school" data={data}>
   {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
    ))}
</Scatter>
      ...(removed reference lines)
    </ScatterChart>

感谢并很想知道我在哪里出错了

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

我不知道你的 colorType 变量来自哪里，但我认为你可以这样做：

<Scatter data={data} name="A school">
   {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={entry.colourType} />
    ))}
</Scatter>

如果 colourType 不是每个条目的属性，那么试试这个：

<Scatter data={data} name="A school">
   {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
    ))}
</Scatter>

全新 React 应用的完整工作代码

注意：这不包括任何进一步的更改。我只是想更明确地展示数据集。

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

const data = [
  { x: 10, y: 50, colourType: "#FFBB28" },
  { x: 20, y: 50 },
  { x: 30, y: 40 },
];

function App() {
  return (
    <ScatterChart
      width={500}
      height={400}
      margin={{
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
      }}
    >
      <CartesianGrid />
      <XAxis
        type="number"
        domain={[0, 60]}
        dataKey="x"
        name="Speed"
        unit=" Seconds"
        reversed
      />
      <YAxis
        type="number"
        domain={[0, 100]}
        dataKey="y"
        name="Accuracy"
        unit="%"
      />
      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
      <Scatter name="A school" data={data}>
        {data.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
        ))}
      </Scatter>
    </ScatterChart>
  );
}

export default App;

输出：

【讨论】：