时间戳

首页 > 解决方案 > 如何从 React js 中的状态获取图表 js 饼图的数据？

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

问题描述

由于我是新来的反应，我一直在努力将数据从我的状态动态传递到chartjs......我需要的是当用户更新文本框并要求输出时，饼图应该根据输出自动更新...我已将输出值存储在状态中，但饼图不允许我将状态作为数据传递...

这是代码沙箱的链接 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>

              )
     }

我已经尝试为饼图创建一个函数，但无法通过......任何帮助将不胜感激......谢谢！

标签： javascriptreactjsreact-nativestate

解决方案

我认为代码存在一些问题。this.PieChart 函数现在不返回任何内容。通过快速浏览代码，我可以看到您正在尝试从 this.PieChart 函数传递 PieChart 组件所需的道具。返回您需要的任何内容作为组件的道具，并使用括号调用 JSX 内的函数，将所需的参数传递给函数。

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

还，

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

另外，请记住使用正确的命名约定。函数应为驼峰式（this.PieChart 应命名为 this.pieChart）。尝试为组件和功能使用不同的名称。这将解决您可能遇到的许多问题

更新：我已经更新了你分享的沙盒。希望这可以帮助。 https://codesandbox.io/s/friendly-mahavira-79n2s

推荐阅读