如何在 React 问题居中和控制大小中正确设置 Recharts 样式？

Question

我正在尝试将两个图形设置为浮动卡片的样式，但在控制图形的大小和居中时遇到问题，本示例中的饼图更是如此。 注意我正在整理参数以作为来自 App.js 的道具传递，因此我可以毫无问题地生成多个图表。 无论出于何种原因，我都无法将饼图居中，也无法控制高度。 下面是代码：

应用程序.js

import React, { Component } from 'react';
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie
} from 'recharts';
import Graph from './Graph';
import { Container } from 'react-bootstrap';

class App extends Component {
  render() {

    const data01 = [
      { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
      { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
      { name: 'Group E', value: 278 }, { name: 'Group F', value: 189 },
    ];

    return (
      <Container>
        <Graph
          graph=
          {<LineChart
            data={data01}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="4 4" />
            <XAxis dataKey="value" angle={0} textAnchor="end" tick={{ fontSize: 13 }} />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="value" stroke="#000000" activeDot={{ r: 8 }} />
          </LineChart>}
        />


        <Graph
          graph=
          { <PieChart>
          <Pie dataKey="value" isAnimationActive={false} data={data01} cx={200} cy={200} outerRadius={80} fill="#8884d8" label />
          <Tooltip />
        </PieChart>}
        />
      </Container>
    );
  }
}

export default App;

Graph.js

import React, { Component } from 'react';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie
  } from 'recharts';
import classes from './graph.module.css';



  const Graph = ( props ) => {

      return ( 
        <div className={classes.wrapper}>    
        <ResponsiveContainer width = "100%" height={250} >
            {props.graph}
        </ResponsiveContainer>
        </div>
      )
  };

  export default Graph;

图.模块.css

.wrapper {
    background-color: aliceblue;
    width: 70%;
    height: 70%;
    box-shadow: 20px 8px 20px grey;
    -webkit-transition:  box-shadow .2s ease-in;
    display:block;
    margin: 20px auto;
}

.wrapper:hover{ 
    box-shadow: 30px 8px 30px grey;
   -webkit-transition:  box-shadow .2s ease-in;
 }

看下面的结果：

Answer 1

对于查看这篇文章的人，我有 2 条建议。 响应式容器只是调整整个图形组件的大小。 您可能需要也可能不需要真正触摸它。

如果您想居中您的图表/图形，您只需要根据图表集的宽度和高度调整 x 和 y 坐标（ cx和cy ）的中心属性。 下面的代码可能会让您更清楚地了解发生了什么。

import { PieChart, Pie, Sector, Cell, Legend, Tooltip, ResponsiveContainer } from 'recharts';

 <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>

与居中元素一样，如果要居中<Legend/>组件，则需要传递内置的align属性（阅读文档）。
所以整个组件在 JSX 中可能看起来像这样。
这是完整组件的示例。

// PIECHART from recharts
const data = [
    {name: 'GrpA', value: 60}, 
    {name: 'GrpB', value: 20},
    {name: 'GrpC', value: 10}, 
    {name: 'GrpD', value: 6}
];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
const RADIAN = Math.PI / 180;    

const ParticipantsPieChart = ()=>{
    return (

        <PieChart width={800} height={400}  align="center">

        <Pie
          data={data} 
          cx={400} 
          cy={200} 
          innerRadius={110}
          outerRadius={140} 
          fill="#8884d8"
          paddingAngle={5}
          label
          margin={{
            top: 5, right: 30, left: 30, bottom: 5,
        }}

        >
            {
            data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
        </Pie>

        <Legend align="center"/>
        <Tooltip/>
      </PieChart>
    )
}