Question

我想将数据对象中定义的填充色的低透明度版本用作RadialBar图表的背景填充色。

我尝试将函数用作background的{{1}}属性，但似乎没有任何参数。

<RadialBar />

const data = [
  { name: 'foo', value: 1, fill: 'red' },
  { name: 'bar', value: 2, fill: 'blue' },
];

有什么想法可以访问相应扇区的颜色吗？

Answer 1

不确定我是否理解正确，但是如果您需要更改 RadialBar 的背景颜色，您可以将一个对象分配给“背景”属性，如果您需要更改填充颜色，您可以更改“填充”属性，例如此处：

<RadialBar
  background={{ fill: data[0].fill }}
  fill={data[0].fill}
/>

Answer 2

使用react memo来更改radiusBarChart中的fill属性，尝试一下。

data={React.useMemo(
          () => [
            {
              percentage,
              fill: 'currentColor',
            },
          ],
          [percentage],
        )}

并为此设置一个div。

<div className={{
color: 'green',
}} >
<RadialBarChart data={React.UseMemo(..etc)}>
<RadiaBar (radial props) />
</RadialBarChart>
</div>

图表：根据数据中的填充颜色更改RadialBar图表的背景填充颜色

2 个答案: