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

Posted 2023-02-22

【中文标题】recharts中饼图提供cornerRadius后如何加入

【英文标题】：How to join after cornerRadius is provided for piecharts in recharts

【发布时间】：2020-03-19 09:29:20

【问题描述】：

我正在使用 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% 显示为灰色。

【参考方案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/

【讨论】：

感谢您的回答。但我只需要一个半圆而不是一个完整的圆。

使用下面的代码得到半圆 data.map((entry, index) => ) 跨度>

感谢您的回复。但是看起来这个边缘没有像上图那样的圆角。我只需要边缘的圆角。

您可以简单地将 paddingAngle=0 属性添加到您的共享组件中。

好的，我刚刚尝试了这个小提琴中的解决方案。 jsfiddle.net/ktbp6gr5 。你能编辑一下吗？

【参考方案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')
);

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

【讨论】：

非常感谢@Sunil。我只有一个问题，我会接受答案。橙色部分的曲线可以去掉吗？

橙色和黄色之间的轻微曲线，那个？是的！在第一个<Pie>，有paddingAngle=-5 改成-10 或-15 你会得到想要的效果

我遇到的一个问题是，是否可以在饼图中添加一个工具提示。我的意思是需要为整个饼图显示单个工具提示，并且工具提示需要跟随鼠标指针。如果您愿意，我很乐意提出新问题。

还有一个问题。如果只有 2 个数据点，则此解决方案似乎不起作用。我试过这样做，边缘似乎仍然弯曲

对于工具提示，我现在不确定，如果我得到相关的东西会在此处发布（或者您可以尝试发布新问题，以便其他人可以帮助您）。您可以尝试用this example 中给出的标题将整个图表包装在div 中。这将为您提供本机工具提示