React recharts：饼图未呈现答案

【问题标题】：React recharts : Pie chart is not renderingReact recharts：饼图未呈现
【发布时间】：2022-01-08 06:51:22
【问题描述】：

我无法渲染饼图，我看不到我做错了什么（基于我在示例和文档中看到的内容）

数据和颜色：

const piedata = [
    { name: "Technology", value: props.data.tech },
    { name: "Services", value: props.data.services },
    {
      name: "Communication",
      value: props.data.communication,
    },
    { name: "Others", value: props.data.others },
  ];

  const PieColors = ["#bce893", "#44a7e1", "#556cfb", "#f4b040"];

道具是这种形式

data: EquityAllocation(
communication: 6.1,
others: 2.7,
services: 7.5,
tech: 83.6
)

console.log(props)

饼图代码：

<PieChart width="400px" height="400px">
          <Pie
            data={piedata}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={200}
            paddingAngle={5}
            fill="#82ca9d"
            dataKey="value"
            nameKey="name"
          >
            {piedata.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={PieColors[index]} />
            ))}
          </Pie>
        </PieChart>

我正在使用 "recharts": "^2.1.8",

官方文档中的示例：https://recharts.org/en-US/examples/PieChartWithPaddingAngle

日志中也没有打印任何内容，没有错误或警告。我也再次启动了整个应用程序，但仍然没有呈现图表。

【问题讨论】：

prop 中的数据不是有效的 JSON。你能纠正吗？控制台记录 props.data 并附加到您的问题
我附上了console.log(props)的快照

标签： reactjs recharts

【解决方案1】：

所以我开始迁移到 MUIv5 并升级到最新版本的 recharts 并遇到了同样的问题。我的一些图表停止渲染。我现在的观察结果是图表需要width 或height 作为实际数值。尝试将width="400px" height="400px" 切换为width={400} height={400}。

这也是他们的演示图表中的内容。

【讨论】：