求助：使用Chart.js在HTML中绘制图表，页面未显示图表

你的代码中存在一个核心语法错误，导致Chart.js无法识别数据配置：

• data对象内的属性名错误：应该使用复数形式datasets，而非单数dataset。Chart.js依赖datasets数组来加载图表的数据集，单数属性会被框架忽略，最终导致图表无法渲染。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart Demo</title>
</head>
<body>
    <div style="width: 900px; height: 400px;">
        <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js" integrity="sha512-v3ygConQmvH0QehvQa6gSvTE2VdBZ6wkLOlmK7Mcy2mZ0ZF9saNbbk19QeaoTHdWIEiTlWmrwAL4hS8ElnGFbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        let labels = ['Big Mac', 'QuarterPounder', 'Mcdouble', 'Doubler Cheeseburger', 'Hamburger'];
        let itemData = [550, 520, 400, 450, 250];

        const data = {
            labels: labels,
            datasets: [{ // 这里改为复数datasets
                data: itemData,
                backgroundColor: 'rgb(66,221, 245)'
            }]
        };

        const config = {
            type: 'bar',
            data: data
        };

        const chart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者coderoftheday