如何在React中将数据传递到Chart.js图表

由 发布于

我正在研究一个项目，在这个项目中，您可以键入一周内花费的金额（我有杂货，购物，健康和家庭需求输入），并计算将其添加到组件中的总金额。该项目的另一个功能是用Chart.js制作的图表，它应显示在杂货，购物，健康和家庭需求上花费的金额。但是我在这部分上遇到了麻烦。我正在尝试通过道具传递存储在受控输入中的数据，但是该数据未在图表中显示。有人可以帮我吗？这是代码：

 import React from "react";

import Header from "./Header";
import InputComponent from "./InputComponent";
import AmountCard from "./AmountCard";

import BillChart from "./BillsChart";

class SpendsApp extends React.Component {
constructor(props) {
 super(props);
 this.state = {
   groceries: 10,
   shopping: 0,
   health: 0,
   houseNeeds: 0,
   total: 0,
   chartData: []
 };
 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(e) {
 const { name, value } = e.target;
 this.setState({
   [name]: value
 });
}

handleSubmit(e) {
 const { groceries, shopping, health, houseNeeds } = this.state;

 const gSum = parseInt(groceries, 10);
 const sSum = parseInt(shopping, 10);
 const hSum = parseInt(health, 10);
 const hnSum = parseInt(houseNeeds, 10);

 this.setState({
   total: gSum + sSum + hSum + hnSum
 });
 e.preventDefault();
}

render() {
 return (
   <div className="main">
     <Header />
     <hr />
     <div>
       <form onSubmit={this.handleSubmit}>
         <div className="input-flex">
           <InputComponent
             handleChange={this.handleChange}
             name="groceries"
             placeholder="Groceries"
           />
           <InputComponent
             handleChange={this.handleChange}
             name="shopping"
             placeholder="Shopping"
           />
           <InputComponent
             handleChange={this.handleChange}
             name="health"
             placeholder="Health"
           />
           <InputComponent
             handleChange={this.handleChange}
             name="houseNeeds"
             placeholder="Home"
           />
         </div>
         <button>Calculate</button>
       </form>
     </div>

     <AmountCard spent={this.state.total} />

     <BillChart spendings={[this.state.chartData]} />
   </div>
 );
}
}

export default SpendsApp;

这是第二个

 import React from "react";

import { Bar } from "react-chartjs-2";

class BillsChart extends React.Component {
constructor(props) {
 super(props);
 this.state = {
   chartData: {
     labels: ["Groceries", "Shopping", "Health", "House Needs"],
     datasets: [
       {
         label: "Amount Spent",
         backgroundColor: "green",
         hoverBackgroundColor: "green",
         hoverBorderWidth: 2,
         hoverBorderColor: "#000",
         data: [this.props.spendings]
       }
     ]
   }
 };
}

render() {
 return <Bar onClick={this.props.handleClick} data={this.state.chartData} />;
}
}

export default BillsChart;