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

Question

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

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

Answer 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

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

How can I add shadow on piechart in recharts?

css

svg

reactjs

recharts