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

【问题标题】：Create a prop for a chart.js pie chart为 chart.js 饼图创建一个道具
【发布时间】：2020-11-04 21:02:22
【问题描述】：

我在我的 react 项目中使用 Chart.js。我想通过创建组件来尽可能整齐地构建我的项目并在我的 App.js 上调用它们

如何在不从 App.js 实际调用我的饼图的情况下创建一个 react prop 并从另一个组件调用它

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>
    );
  }
}

【问题讨论】：

标签： reactjs react-native chart.js react-chartjs

【解决方案1】：

这是我在项目中使用饼图的方式：在另一个文件中，您可以创建一个自定义组件并添加您的代码，如下所示

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>
  );
};

在 App.js 中，您可以使用 useState 来保存数据，如下所示：

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

并在您的代码中使用它：

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

【讨论】：

【解决方案2】：

如果您在PieChart.js 文件中创建一个名为PieChart 的组件，如下所示：

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>
        );
    }
}

然后你可以这样从App.js导入：

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} />
    )
  }
}

在这里，我创建了一个名为 data 的自定义 props 并将其传递给 PieChart 组件，该组件由 PieChart 组件中的 this.props.data 访问。您可以根据需要创建多个道具。就像你可以通过这种方式传递options一样。

您还可以将您的数据（从App 作为data 道具传递）保留在PieChart 组件中，并通过<PieChart /> 从任何您想要的地方调用它。

注意：我已将 App.js 和 PieChart.js 两个文件保存在同一目录中。

【讨论】：