перерисовывает центрирование круговой диаграммы с помощью адаптивного контейнера

Я использую повторные диаграммы для создания круговых диаграмм. Если посмотреть на этот пример, http://recharts.org/#/en-US/examples/PieResponsiveContainer круговую диаграмму можно центрировать с помощью компонента ResponsiveContainer.

Но моя попытка не удалась: https://codesandbox.io/s/ll68p643xl. Попробуйте изменить размер области просмотра на большую ширину, круговая диаграмма больше не находится в центре. Интересно, что здесь не так?


reactjs javascript recharts
person Cecilia Chan    schedule 22.08.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

ResponsiveContainer просто заставляет пирог принимать размер своего контейнера. Если вы проверите html, вы увидите, что размер контейнера фактически равен размеру своего родителя. Если вы хотите центрировать его, вы можете сделать так, чтобы контейнер не занимал всего родителя, а использовать css. Что-то вроде этого:

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

А затем контейнер:

<ResponsiveContainer className="container" height={70} width='30%'>
person Mario F    schedule 22.08.2017
comment
Я решил проблему, удалив опору cx на Pie - person Cecilia Chan; 22.08.2017
comment
Спасибо @CeciliaChan! Ваш ответ сработал для меня намного лучше - person modulitos; 14.12.2018

arrow_upward
1
arrow_downward

Я знаю, что это запоздалый ответ, но для тех, кто пытается центрировать <PieChart> с помощью width и height, передайте cx prop на половину ширины <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>
person Kaung Myat Lwin    schedule 07.09.2019