使用带有chartjs的reactJs绘制饼图

Question

我正在尝试使用 react 和 chartjs 绘制饼图。

我正在调用这样的 API：-

const border ={
    border:'1px solid blue',
    borderRadius: '25px',
    padding:'15px',
    marginTop:'20px'
}

class ScreenView extends Component {



constructor(){
    super();
    this.state = {
        newUsers:'',
        allUsers:'',
        totalApplication:'',
        chartData:{},
            newuserstoday:'',
            candidatesOnliveAdvt:'',
            totalsignuptilltoday:'',
            genderDetails:{
                male:'',
                female:'',
                other:''
            }
        }

    }


componentDidMount(){

    const newChartData = {...this.state.chartData}

    let url4 ="http://localhost:7080/getGenderAgainstAdvt";

    getAllData(url4).then(
       response => this.setState({genderDetails:response.data},()=>{
        console.log("male gender count: "+this.state.genderDetails.male);
        console.log("female gender count: "+this.state.genderDetails.female);
        console.log("other gender count: "+this.state.genderDetails.others);
       })

    );

}
componentWillMount(){

    this.getChartData();
}

getChartData(){
    // Ajax calls here

    let maleCount = this.state.genderDetails.male;
    let femaleCount = this.state.genderDetails.female;
    let otherCount = this.state.genderDetails.other;

    console.log("male count is " +maleCount);


    this.setState({
      chartData:{
        labels: ['Male', 'Female', 'Other'],
        datasets:[
          {
            label:'Population',
            data:[
            maleCount,femaleCount,otherCount
            ],
            backgroundColor:[
              'rgba(255, 99, 132, 0.6)',
              'rgba(54, 162, 235, 0.6)',
              'rgba(255, 206, 86, 0.6)'
            ],
            borderWidth:1,
            hoverBorderWidth:3,
            hoverBorderColor:'green'
          }
        ]
      }
    });
  }


render(){
    return(
    <div>
        <div className="container">
            <div className="row" style={border}>
                <div className="col-sm-8">
                    <Chart chartData={this.state.chartData}/>
                </div>
            </div>
        </div>
    </div>
    );
}
}

export default ScreenView;

而我的其他组件图表如下所示：-

class Chart extends Component {

    constructor(props){
        super(props);
        this.state = {
          chartData:props.chartData
        }
        //console.log("chart data is here...."+ props.chartData.datasets[0].data[0].male);
      }

      static defaultProps = {
        displayTitle:true,
        displayLegend: true,
        legendPosition:'right',
        location:'16530-16536/2074-75'
      }

      render(){
        return (
          <div className="chart">
            <Pie
              data={this.state.chartData}
              options={{
                title:{
                  display:this.props.displayTitle,
                  text:'Pie Chart for Advertisement Code '+this.props.location,
                  fontSize:25
                },
                legend:{
                  display:this.props.displayLegend,
                  position:this.props.legendPosition
                }
              }}
            />
          </div>
        )
      }
}

我的 API 返回非常简单的 JSON，如下所示：-

{
    "male": 74433,
    "female": 51442,
    "others": 183
}

我需要获取这个 API 数据并根据它绘制饼图。我的问题是我无法将 API 返回的数据发送到图表数据集。

如果我将一些手动数据发送到图表，即

datasets:[
          {
            label:'Population',
            data:[
           12345,54758,2154
            ],
}]

然后它成功地绘制数据。但是现在我必须使用 API 获取的数据而不是手动插入的数据。我该怎么做？

更新：-

我的图表组件没有接收数据。所以我将this.state.chartData 更改为this.props.chartData，它只工作了一半。从某种意义上说，我现在可以绘制图表，但它只能绘制三个给定值中的两个。

请看照片。

Answer 1

直接使用 props 数据来渲染图表如下：

<Pie
    data={this.props.chartData}
    ...
    ...

每次你的父 ScreenView 获取新数据时，该数据将被发送到子 Chart 组件并重新渲染它