Chart.js v3.7.1 Chart 不是构造函数

Question

我正在关注 chart.js 上的 Youtube 教程（https://www.youtube.com/watch?v=sE08f4iuOhA 9:05 我的代码中的错误点）当他们查看带有图表的网页时，它没有显示任何错误，但是当我尝试重新创建它时，我运行进入“未捕获的类型错误：图表不是构造函数”。我不确定这里哪里出错了。
我试过将 var 更改为 let，在 canvas 标签上添加尺寸，并将 Chart.js 版本恢复到较低版本，可能许多论坛帖子推荐的更稳定的版本，但无济于事，我一直运行关注这个问题，这让我相信它在我的代码中有一个被忽视的错误。以下是：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <title>Graph</title>
    </head>
    
    <body>
        <div class="container">
            <canvas id="myChart" width="600" height="600"></canvas>
        </div>
        
        <script>
            let Chart = document.getElementById('myChart').getContext('2d');
            let line = new Chart(myChart, {
                type:'line',
                data:{
                    labels:[],
                    datasets:[
                        1,
                        2,
                        3,
                        4,
                        5,
                        99,
                    ],
                },
                options:{}
            
            });
        </script>
    </body>
</html>

这是我运行关于这个问题的第二个教程，我遵循 chart.js 入门指南，但我的图表没有出现（假设有相同的问题或类似的问题，我没有没想到 f12 调试（令人尴尬，直到我遇到问题的那几秒钟）），所以我转向视频教程只是为了运行进入我的图表不再出现。我正在尝试学习如何以这种方式在学校的项目中使用图表，但它开始变得非常令人沮丧。
我正在运行在 Raspberry Pi.
上的 Flask 服务器上进行此操作我希望有人可以提供一些关于我做错了什么的见解（我对网页构建还很陌生）！
干杯！

Answer 1

您的代码中存在名称冲突。您定义了一个变量 Chart，它也是来自 Chart.js 的主要 class 的名称。例如，您可以将变量重命名为 ctx。

此外，data.labels 的条目数应与 data.datasets.data 相同。进一步记住 data.datasets 是一个对象数组。提供了更多信息 here。

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{      
      data: [1, 2, 3, 4, 5, 99]
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Chart.js v3.7.1 Chart 不是构造函数

Chart.js v3.7.1 Chart is not a Constructor

html

javascript

constructor

typeerror

chart.js