React ChartJS Scatter Plot - 无法绘制数据

Question

我正在尝试使用 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,192,0.4)',
                    pointBorderColor: 'rgba(75,192,192,1)',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 1,
                    pointHoverRadius: 10,
                    pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                    pointHoverBorderColor: 'rgba(220,220,220,1)',
                    pointHoverBorderWidth: 2,
                    pointRadius: 3,
                    pointHitRadius: 10,
                    data: scatter,
                    backgroundColor: [
                        'rgba(75,192,192,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>
    )
};

Answer 1

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