如何从 React js 中的状态获取图表 js 饼图的数据？

Question

As I am new to react i have been struggling to pass data from my state to the chartjs dynamically...what I need is when ever user updates the Textbox and asks for the Output, the Pie chart should update itself automatically according to the output...i have stored the output values in the state but Pie chart is not allowing me to Pass state as data...

Here's a Link to the Code Sandbox https://codesandbox.io/s/autumn-mountain-sv1qk?fontsize=14&hidenavigation=1&theme=dark

 class Buyer extends Component {

        constructor(props) {
            super(props);
            this.state = {
                income: 100000,
                percent: 13,
                totalTax: '',
                grossPrice: '',
                otherValues: '',
            }
        }






PieChart = (Gross,totalTax) => {
    let GrossPrice = Gross  ;
    let TotalTax = totalTax ;
    let data = [GrossPrice,TotalTax]
    let Pie = {
            labels: ['Total Tax', 'Gross Price'],   
            datasets: [{
                data: data,
                backgroundColor: [
                    '#1ca5b6',
                    '#89ba2b',
                ],

            }]

        }

    }



handleIncome = (event) => {
    let income = event.target.value
    this.handleData(income, this.state.percent)
    console.log(this.state)

}

handlePercent = (event) => {
    let Percent = event.target.value
    this.handleSliderData(this.state.income, Percent)

}


// From Slider
sliderIncome = (event) => {
    this.setState({ income: event })
    this.handleSliderData(event, this.state.percent)
    // console.log(this.state)

}

sliderPercent = (event) => {
    this.setState({ percent: event })
    this.handleSliderData(this.state.income, event)

}


handleData = (income, Percent) => {
    this.setState({
        income: income,
        percent: Percent,
        totalTax: //some Calculations
        grossPrice: //some Calculations
        otherValues: //some Calculations

    })



    console.log(this.state)
}




handleSliderData = (income, Percent) => {
    this.setState({
        income: income,
        percent: Percent,
        totalTax: //some Calculations
        grossPrice://some Calculations
        otherValues://some Calculations
    })
    this.PieChart(this.state.grossPrice,this.state.totalTax)
    // console.log(this.state)

}


render() {
            return ( 
              <div>
                    <div >
                        <Card s>
                            <PieChart data={this.PieChart} width={600} height={300} />
                        </Card>
                    </div>
                </Col>

              )
     }

I have tried creating a function for the pie chart but was not able to get through...any help would be appreciated..thanks!!

Answer 1

I think there are a few problems with the code. this.PieChart function doesn't return anything now. From giving the code a quick glance, I can see that you are trying to pass the props needed for the PieChart component from this.PieChart function. Return whatever you need as prop for the component and also call the function inside the JSX using parenthesis, passing the needed parameters into the function.

PieChart = (Gross,totalTax) => {
let GrossPrice = Gross  ;
let TotalTax = totalTax ;
let data = [GrossPrice,TotalTax]
let Pie = {
        labels: ['Total Tax', 'Gross Price'],   
        datasets: [{
            data: data,
            backgroundColor: [
                '#1ca5b6',
                '#89ba2b',
            ],

        }]

    }

}
return Pie; //or whatever data you need for the component

Also,

 <PieChart data={this.PieChart(this.state.grossPrice, this.state.totalTax)} width={600} height={300} />

Also, keep in mind to use proper naming conventions. Functions should be in camel case( this.PieChart should be named this.pieChart ). Try using different names for the component and function. This shall solve a lot of problems you might run into

Update: I have updated the sandbox you have shared. Hope this helps. https://codesandbox.io/s/friendly-mahavira-79n2s

Answer 2

I think i found the solution for the particular problem...i order to update the data in the piechart dynamically using state we have create a state in the constructor(props) like so...

constructor(props) {
        super(props);
        this.state = {
            income: '',
            percent: '',
            totalTax: '',
            grossPrice: '',
            otherValues: '',
            Data: {} 
        }

    }

Then i have used componentDidMount() to mount the initial state of the PieChart like So....

componentDidMount() {

        let runscore = [100,200];



        this.setState(
            {
                Data: {
                    labels: [
                        'Purple',
                        'Yellow',

                    ],
                    datasets: [
                        {

                            data: runscore,
                            backgroundColor: [
                                '#1ca5b6',
                                '#89ba2b',

                            ]
                        }
                    ]
                }
            });


    }

then i created a function PieChart = (Gross,totalTax) that fetches data from another functions and used that to set state in Data like so...

PieChart = (Gross,totalTax) => {
        let runscore = [Gross,totalTax];
        this.setState({
            Data: {
                labels: [
                    'Gross Price',
                    'Total Tax',

                ],
                datasets: [
                    {
                        data: runscore,
                        backgroundColor: [
                            '#1ca5b6',
                            '#89ba2b',
                        ]
                    }
                ]
            }
        });


        }

For now this is not updating the state in sync with the current state but i gets the work done...i hope this helps others...