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。现在，复制 URL 中以 Chart.min.js 结尾的部分。

方法 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 中包含一个 script 标签，该标签链接到 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.cn 到 .js 文件中。

  • 步骤 3 - 接下来，创建一个 HTML 文件并编写代码。将 script 标签放在<body> </body> 部分。

  • 步骤 4 - 最后，将此文件添加到 script 标签中，并使用路径<script src = "path/folder/firstchart.js"></script>

打印页面
上一页
下一页
广告