React ChartJS 散点图 - 无法绘制数据

问题描述

我正在尝试使用 chartJS 生成散点图。情节不会图。 当我通过声明数据手动输入数据时，它工作正常，

var scatter = [
        { x: 65,y: 75 },{ x: 59,y: 49 },{ x: 80,y: 90 },{ x: 81,y: 29 },{ x: 56,y: 36 },{ x: 55,y: 25 },{ x: 40,y: 18 },]

但是当我通过 API 调用获取数据并将数据推送到数组时，它不起作用。有什么建议么？我怀疑这与如何将数据推送到阵列上有关，但不确定出了什么问题。

谢谢

下面的最小解

import React,{ useEffect,useState } from 'react';
import axios from 'axios';

function App() {
    const [scatterData,setScatterData] = useState({});

    const chart = () => {
        var scatter = [];
        
        axios.get('http://dummy.restapiexample.com/api/v1/employees')
        .then(res => {
            let temp = res.data.data
            temp.forEach( i=> {
                let age = parseInt(i.employee_age)
                let salary = parseInt(i.employee_salary)
                scatter.push({"x": age,"y": salary})
            })
        }).catch(err => {
            console.log(err)
        })
        console.log(scatter)

 

        setScatterData({
            datasets: [
                {
                    label: 'test',fill: true,backgroundColor: 'rgba(75,192,0.4)',pointBorderColor: 'rgba(75,1)',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 10,pointHoverBackgroundColor: 'rgba(75,pointHoverBorderColor: 'rgba(220,220,pointHoverBorderWidth: 2,poinTradius: 3,pointHiTradius: 10,data: scatter,backgroundColor: [
                        'rgba(75,0.6)'
                    ],borderWidth: 4
                }
            ]
        });
    }

    useEffect(() ={
        chart()
    },[])

    return (
        <div className ="container-fluid">
            <div class="row">
                <div className ="col-md-12">
                    <Scatter data={scatterData}/>
                </div>
            </div>
        </div>
    )
};

解决方法

在将所有数据从 api 推送到散点数组后，尝试在图表对象/实例上调用 update 方法