Javascript 使用reactJs和chartjs绘制饼图

我正在尝试使用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>
        )
      }
}

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

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

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

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

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

更新：-

我的图表组件未接收数据。因此，我将

this.state.chartData

更改为

this.props.chartData

，并且它工作了一半。在某种意义上说，我现在能够绘制图表，但它只绘制三个给定值中的两个

请看照片

---

只需直接使用道具数据即可呈现图表，如下所示：

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

---

请尝试使用更大的其他值，与其他值相比，其百分比将小于1。如果低于1%，Chartjs可能不会绘制哦！！这可能是原因，但这是实时数据，因此手动添加高值是没有意义的。