8

我正在使用 recharts 创建饼图。查看此示例时,http: //recharts.org/#/en-US/examples/PieResponsiveContainer 饼图可以使用 ResponsiveContainer 组件居中。

但我的尝试失败了:https ://codesandbox.io/s/ll68p643xl 。尝试将视口的大小更改为更大的宽度,饼图不再居中。我想知道这里有什么问题。

4

2 回答 2

3

ResponsiveContainer只是让馅饼占据其容器的大小。如果您检查 html,您将看到容器实际上是其父级的大小。如果要居中,可以使容器不占用整个父级,并使用 css。像这样的东西:

.pie-row .pie-wrap > div {
    background: red;
    margin: 0 auto;
}

然后是容器:

<ResponsiveContainer className="container" height={70} width='30%'>
于 2017-08-22T08:48:21.630 回答
2

我知道这是一个迟到的答案,但对于任何试图以and为中心<PieChart>的人,将prop 传递到.widthheightcx<PieChart>

喜欢,

  <PieChart width={this.props.width} height={this.props.height}>
    <Pie
      cx={this.props.width / 2}
      cy={200}
      label
      outerRadius={this.props.pieData.radius}
      data={this.props.pieData.data}
      dataKey={this.props.pieData.dataKey}>
    </Pie>
  </PieChart>
于 2019-09-07T17:32:17.460 回答