使用chart.js在图表中显示抓取的数据并做出反应

Question

我想创建一个风力数据图表。 但是图表显示为空白。

单独的抓取功能可以正常工作，但图表似乎无法正确获取数据。

我如何确保图表功能具有正确的数据？

我的代码在下面。

谢谢。

import { Line } from 'react-chartjs-2';
const request = require('request');
const cheerio = require('cheerio');

const WindChart = () =>
{
    const [chartData, setChartData] = useState({})
    let winds = []
    request(
        'https://www.bmreports.com/bmrs/?q=generation%2Ffueltype&fbclid=IwAR2p2a84CaJhgzF-YOU4MzOS-cMuZUpeDmLHFkWZU7-NauRHrA1owwdsMog',
        (error, response, html) =>
        {
            if (!error && response.statusCode === 200)
            {
                const $ = cheerio.load(html);

                 winds = $('.gen-fuel tbody td:nth-child(8)')
                    .map(function ()
                    {
                        return $(this).text();
                    })
                    .get();


            }
        }
    )
    const chart = () =>
    {

        setChartData({
            labels: ['a', 'b', 'c', 'd'],
            datasets: [
                {
                    label: 'Wind Power',
                    data: winds,
                    backgroundColor: [
                        'rgba(75,192,192,0.1)'
                    ],
                    borderWidth: 10
                }
            ]
        })

    }
    useEffect(() =>
    {
        chart()
    }, [])
    return (
        <div className="App">
            <h1>Wind Stuff</h1>
            <div> <Line data={chartData} /> </div>
        </div>
    )

}
export default WindChart;