Rechart面积图渐变颜色根据变量变化

Question

参考链接
在 Recharts React 库中，您可以使用以下方法向面积图添加渐变填充

<AreaChart width={730} height={250} data={data}
  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
  <defs>
    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
    <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" />
  <Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>

在示例中，他们使用了两个带有硬编码“stopColor”属性的渐变元素。当我通过以下方式给出可变颜色时，stopColor = {areaColour}它不起作用重新绘制图表区域

const plots = [colour1, colour2]
//Rechart line
plots.map((areaColour, index) => <Area type="monotone" dataKey={data[index]} fill="url(#color)" />

定义

<defs>
    <linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor={areaColour} stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
</defs>

有没有办法在内部使用变量，<defs>以便我可以用它来生成动态渐变？

Answer 1

我知道问题很旧，但是当我寻找问题的解决方案时遇到了它。如果其他人有同样的问题，我会将解决方案留在这里。

您需要对每个组件id进行更改。LinearGradient像这样：

    <defs>
      <linearGradient id={`color${color}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={color} stopOpacity={0.4}></stop>
        <stop offset="75%" stopColor={color} stopOpacity={0.05}></stop>
      </linearGradient>
    </defs>

接下来的区域：

    <Area
      dataKey={"value"}
      fill={`url(#color${color})`}
    />

这个对我有用。