Chart.js - 安装
先决条件
在安装和开始使用 Chart.js 库之前，您需要对以下程序有基本的了解 −
超文本标记语言 (HTML) 和层叠样式表 (CSS) 的基础知识
对 JavaScript 有基本的了解，尤其是面向对象编程 (OOP) 概念和数组。
安装
在开始使用 Chart.js 之前，我们需要先安装它。以下是您可以用来安装 Chart.js 的几种方法 −
方法 1 − 使用 NPM
您可以使用 NPM 安装 Chart.js。复制并粘贴以下命令以在您的项目中下载 Chart.js −
npm install chart.js --save
方法 2 − 使用 CDN
使用 CDN 在您的项目中安装和使用 Chart.js 是最快和最简单的方法之一。首先从 CDN 网站获取最新的 CDN 链接:https://cdnjs.com 。现在，复制末尾带有 Chart.min.js 的 URL。
方法 3 − 使用 GitHub
您可以使用 GitHub 下载最新版本的 chart.js 库。链接 https://github.com 可帮助获取 Chart.js 库。
方法 4 − 使用 jsDelivr
您还可以使用 jsDelivr 下载最新版本的 chart.js 库。链接 https://www.jsdelivr.com/ 可帮助获取 Chart.js 构建文件。
使用 Chart.js 设置项目
使用 CDN − 要使用 chart.js 设置项目，请在 HTML 中包含一个链接到 chart.js CDN 的脚本标记。换句话说，将 CDN 加载到 body 部分，如下所示 −
<html> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script> </body> </html>
使用 jsDelivr − 您可以按照以下步骤使用 jsDelivr 为您的项目设置 chart.js −
步骤 1 − 创建一个文件并使用"js"关键字保存名称。例如:firstchart.js。
步骤 2 − 现在从 jsDelivr 下载 chart.js 库。下载的库保存在 filename.js 文件中。将链接 https://cdn.jsdelivr.net 复制并粘贴到 .js 文件中。
步骤 3 − 接下来，创建一个 HTML 文件并编写代码。将脚本标记放在 <body> </body> 部分中。
步骤 4 − 最后，将此文件添加到脚本标记中，路径为 <script src = "path/folder/firstchart.js"></script>
