如何在 recharts 中的饼图上添加阴影？答案

【问题标题】：How can I add shadow on piechart in recharts?如何在 recharts 中的饼图上添加阴影？
【发布时间】：2022-02-11 04:57:35
【问题描述】：

我想在饼图上添加阴影。我正在使用 recharts 库。

如果您有任何解决方案，请告诉我。谢谢。

【问题讨论】：

标签： css reactjs svg recharts

【解决方案1】：

您可以在Cell 组件上添加阴影过滤器以添加此效果。我只是通过 style 属性传递了值，但你可以做任何最适合你的事情。

    <PieChart width={800} height={400}>
      <Pie
        data={data}
        cx={120}
        cy={200}
        innerRadius={70}
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {data.map((entry, index) => (
          <Cell
            key={`cell-${index}`}
            fill={COLORS[index % COLORS.length]}
            style={{
              filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`
            }}
            stroke="0"
          />
        ))}
      </Pie>
    </PieChart>

工作示例 CodeSandbox：https://codesandbox.io/s/pie-chart-with-drop-shadow-fxe8x?file=/src/App.tsx

【讨论】：

感谢您的快速回答。你拯救了我的一天。
@MidasDev 不客气——很高兴我能帮上忙！