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

Question

我正在尝试将两个图表设置为 float 卡，但我在控制图表大小和居中时遇到问题，尤其是本示例中的饼图。请注意，我正在将参数作为 props 从 App.js 传递，这样我就可以毫无问题地生成多个图表。无论出于何种原因，我无法将饼图居中，也无法控制高度。下面是代码:

App.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;

graph.module.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

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

如果您想将图表/图形居中，您只需调整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>
    )
}