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>

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

来源fiddle：https://jsfiddle.net/vkpwm2st/

Answer 2

有解决此问题的方法，它将帮助您解决问题。我会建议您创建 2 个馅饼：one with rounded corners 和 one with pointed corners。并让所有数据保持相同

对于尖角，使它们的颜色透明，除了索引 0 和长度 - 1
对于圆角，做相反的事情

你会得到这样的输出：

这是相同的 JS fiddle：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')
);

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

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

How to join after cornerRadius is provided for piecharts in recharts

reactjs

recharts