如何将填充颜色传递给重新绘制饼图组件

Question

所以基本上我有这个对象数组：

const testMeasurments = [
  {
    data: [
      {name: "glucose", value: 6, color: '#57c0e8'},
      {name: "SpO2", value: 5, color: "#FF6565"},
      {name: "Blood Pressure", value: 4, color: "#FFDA83"},
      {name: "Body Weight", value: 2, color: "purple"}
    ]
  }
]

我想遍历它们并访问该color属性。所以基本上我有一个图表，每个部分都有自己的颜色，所以我想在对象内部循环，同时分配值也为其分配颜色。

例子：

{testMeasurments.map(s=>
        <Pie 
        dataKey="value" 
        isAnimationActive={false} 
        data={s.data} 
        cx={200} 
        cy={200} 
        outerRadius={100} 
        innerRadius={60}
    fill={s.color} // Here I want to loop over each color and assign it to the proper value
  >

正如你所看到的，它在这里肯定不起作用，但这就是我需要的！先感谢您。

Answer 1

查看Pie 组件的代码示例，您需要将color属性重命名为fillin your data set，然后它就会自动工作。fill组件上的属性用于Pie组件级填充颜色。

const testMeasurments = [
  {
    data: [
      {name: "glucose", value: 6, fill: '#57c0e8'},
      {name: "SpO2", value: 5, fill: "#FF6565"},
      {name: "Blood Pressure", value: 4, fill: "#FFDA83"},
      {name: "Body Weight", value: 2, fill: "purple"}
    ]
  }
]

/// ...

{testMeasurments.map(s=>
        <Pie 
        dataKey="value" 
        isAnimationActive={false} 
        data={s.data} 
        cx={200} 
        cy={200} 
        outerRadius={100} 
        innerRadius={60}
        fill="#fff"
  >