Question

我正在使用图表，并且试图创建一个饼图，其半径仅位于图表的边缘。我得到的是以下内容。与此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>

如您所见，拐角半径已添加到每个数据元素。所需的是下图所示的内容。（对不起，我的编辑能力很差）

在图表中是否可能出现这种情况？

如果不是那样，总价值也可以为我服务。我的意思是说，要在图表中显示的总值为100，而我提供的数据为50。然后，图表中50％的数据以某种颜色显示，而重置的50％则显示为灰色。 / p>

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>

您将获得的结果如下图所示 enter image description here

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

Answer 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')
);

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

在图表中为饼图提供了CornerRadius之后如何加入

2 个答案: