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 加载到正文部分，如下所示 -

<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> 的脚本标记中