recharts中饼图提供cornerRadius后如何加入

Question

我正在使用 recharts，我正在尝试创建一个仅在图表边缘具有半径的饼图。我得到的是以下内容。与fiddle 中的类似。

<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>

    <Pie
      data={data} 
      cx={420} 
      cy={200} 
      startAngle={180}
      endAngle={0}
      cornerRadius={40}
      innerRadius={60}
      outerRadius={80} 
      data={data}
     fill="#8884d8"
    />
  </PieChart>

如您所见，圆角半径已添加到每个数据元素中。想要的是如下图所示。 （抱歉我的编辑技术不好）

recharts 中可能出现这样的情况吗？

如果不是总价值之类的东西也可以为我工作。我的意思是，假设图表中显示的总值是 100，我提供的数据是 50。然后 50% 的数据在图表中显示为某种颜色，重置的 50% 显示为灰色。

Answer 1

有一种可能的方法如下， 您可以将名为 paddingAngle={0} 的道具传递给 PieChart 组件。找到下面的代码。

<Pie
      data={data} 
      cx={120} 
      cy={200} 
      innerRadius={60}
      outerRadius={80} 
      fill="#8884d8"
      paddingAngle={0}
    >
        {
        data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
      }
    </Pie>

您将获得的结果将如下图所示

源小提琴：https://jsfiddle.net/vkpwm2st/

Answer 2

有一个解决方法，它会帮助你。我建议你创建 2 个馅饼：one with rounded corners 和 one with pointed corners。其余所有数据相同

• 对于尖角，使它们的颜色透明，除了索引 0 和长度 - 1
• 对于圆角，执行相反的操作

你会得到这样的输出：

这是相同的 JS 小提琴：https://jsfiddle.net/kmfby50o/

视觉上你会看到你想要什么。对于 onClick 等功能，将其应用于第二个<Pie>。由于它与第一个重叠，因此也将得到处理。

const { PieChart, Pie, Sector, Cell } = Recharts;
const data = [{ name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 }, { name: 'Group D', value: 200 }];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const RADIAN = Math.PI / 180;

const SimplePieChart = React.createClass({
    render() {
        return (
            <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>

                <Pie
                    data={data}
                    cx={420}
                    cy={200}
                    startAngle={180}
                    endAngle={0}
                    cornerRadius={40}
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                    paddingAngle={-5}
                >
                    {
                        data.map((entry, index) => <Cell fill={index === 0 || index === data.length - 1 ? COLORS[index % COLORS.length] : 'transparent'} />)
                    }
                </Pie>
                <Pie
                    data={data}
                    cx={420}
                    cy={200}
                    startAngle={180}
                    endAngle={0}
                    cornerRadius={0}
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                >
                    {
                        data.map((entry, index) => <Cell fill={index === 0 || index === data.length - 1 ? 'transparent' : COLORS[index % COLORS.length]} />)
                    }
                </Pie>
            </PieChart>
        );
    }
})

ReactDOM.render(
    <SimplePieChart />,
    document.getElementById('container')
);

希望对您有所帮助。如有任何疑问，请回复。