如何将填充颜色传递给 recharts Pie 组件

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

尝试这样的事情：

testMeasurments.map((tm) => {
   return tm.data.map((data) => {
       <Pie 
         dataKey="value" 
         isAnimationActive={false} 
         data={data.data} 
         cx={200} 
         cy={200} 
         outerRadius={100} 
         innerRadius={60}
         fill={data.color}
   })
}

Answer 2

查看code example for the Pie component，你需要将你数据集中的color 属性重命名为fill，然后就自动生效了。 Pie组件上的fill属性为组件级填充色

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"
  >

Answer 3

如果你将 testMeasurements 作为 prop 传递，那么你需要获取 testMeasurements 数组的第一个元素然后你可以访问 data 数组然后你可以像这样循环 -

{
    this.props.testMeasurements[0].map(dataSet => (
        <Pie
         dataKey="value" 
         isAnimationActive={false} 
         data={dataSet.data} 
         cx={200} 
         cy={200} 
         outerRadius={100} 
         innerRadius={60}
         fill={dataSet.color}
        />
    ))
}

如何将填充颜色传递给 recharts Pie 组件

How to pass fill colors to recharts Pie component

reactjs

recharts