为 chart.js 饼图创建一个道具

Question

I'm using Chart.js inside my react project. and i want to structure my project as neatly as possible by creating components and calling them on my App.js

How can I go about creating a react prop and calling it from another component without Actually calling my pie chart from the App.js

import React from 'react';
import {Pie} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
           'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: [
        '#B21F00',
        '#C9DE00',
        '#2FDE00',
        '#00A6B4',
        '#6800B4'
      ],
      hoverBackgroundColor: [
      '#501800',
      '#4B5000',
      '#175000',
      '#003350',
      '#35014F'
      ],
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Pie
          data={state}
              options={{
              title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
              legend:{
              display:true,
              position:'left',
             }
          }}
        />
      </div>
    );
  }
}

Answer 1

If you create a component named PieChart in the PieChart.js file like this:

import React from 'react';
import { Pie } from 'react-chartjs-2';

export default class PieChart extends React.Component {
    render() {
        return (
            <div>
                <Pie
                    data={this.props.data}
                    options={{
                        title: {
                            display: true,
                            text: 'Average Rainfall per month',
                            fontSize: 20
                        },
                        legend: {
                            display: true,
                            position: 'left',
                        }
                    }}
                />
            </div>
        );
    }
}

Then you can import it from the App.js in this way:

import React from 'react';

import PieChart from './PieChart';

const state = {
  labels: ['January', 'February', 'March',
    'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: [
        '#B21F00',
        '#C9DE00',
        '#2FDE00',
        '#00A6B4',
        '#6800B4'
      ],
      hoverBackgroundColor: [
        '#501800',
        '#4B5000',
        '#175000',
        '#003350',
        '#35014F'
      ],
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <PieChart data={state} />
    )
  }
}

Here I've created a custom props named data and passed it to the PieChart component which is being accessed by this.props.data in the PieChart component. You can create multiple props as you want. Like you can pass options as well in this way.

Also you can keep your data(which is passed from the App as data props) in the PieChart component and call it from anywhere you want by <PieChart /> .

Note: I've kept App.js and PieChart.js both files in the same directory.

Answer 2

This how I used piechart in my project: in another file, you can create a custom component and add your code like below

export const StatusChart = ({ data }) => {
  const [pieData, setPieData] = useState({});

  useEffect(() => {
    setPieData({
      labels: ['declined', 'accepted', 'goterror', 'inprogress'],
      datasets: [
        {
          data: [data.inprogress, data.got_error, data.accepted, data.declined],
          backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
          hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
        },
      ],
    });
  }, [data]);

  return (
    <MDBContainer>
      <Pie data={pieData} options={{ responsive: true }} />
    </MDBContainer>
  );
};

and in App.js you can use useState to save data like below:

  const [generalData, setGeneralData] = useState(null);

and use it in your code:

{generalData ? <StatusChart data={generalData.status_chart} /> : <Spinner animation="border" />}