Chart.js 安装和工作流程

2025年5月17日 | 阅读 6 分钟

chart.js 库可以通过多种方式下载。 Chart.js 支持离线和在线安装文件。您可以从 GitHub 或 CDN 获取此库。最新版本的 chart.js 包可以通过 jsDelivr 下载。 “npm”命令用于安装 Chart.js。您将在此章节中了解如何安装 chart.js。

下载 Chart.js 库

以下是下载和安装 chart.js 库的方法。

1. “npm” 命令

charj.js 库中使用 npm。以下命令用于下载 chart.js。

2. GitHub

您可以使用 GitHub 获取 chart.js 库的最新版本。以下链接可帮助您获取 chart.js 库。

网站链接 - https://github.com/chartjs/Chart.js/releases/tag/v3.2.1

3. jsDeliver

要获取图表的最新版本，您可以使用 jsDelivery.JavaScript 库。 JsDelivr 有助于离线功能。可以通过以下链接访问图表。JavaScript 库。

网站链接 - https://www.jsdelivr.com/package/npm/chart.js?path=dist

4. CDN

最新版本的 chart.js 包通过 CDN 下载。 Chart.js 在线运行，因为 CDN 需要互联网连接。要获取 chart.js 库，请单击以下链接。

网站链接 - https://cdnjs.com/libraries/Chart.js

Chart.js 的设置

安装 chart.js 框架有在线和离线设置。

1. 离线设置 - jsDelive

创建一个文件并使用“js”关键字保存名称。
示例：chart.js
从 jsDelivr 下载 chart.js 库。下载的库保存在 filename.js 文件中。以下链接有助于将库复制并粘贴到 js 文件中。
https://cdn.jsdelivr.net.cn/npm/chart.js@3.2.1/dist/chart.min.js
创建一个 HTML 文件并在页面上编写代码。将 script 标签放入 <body> 部分。
将此文件添加到带有路径的 script 标签中。

2. 在线设置 – CDN

从 CDN 以标签格式复制 chart.js 库。该标签放置在 HTML 页面的 <body> 部分中。
以下链接有助于获取 chart.js 文件。您需要互联网才能使用 chart.js。

 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js">
</script>   

Chart.js 语法

使用 Chart.js 构建图表需要一些基本语法。此语法提供位置、图形类型、图表设置和其他功能。以下是基本语法

 
<canvas id = "graph" aria-label = "chart" height = "500" width = "500"></canvas>
<script>
var chrt = document.getElementById("graph");
var graph = new Chart(chrt, {
  type: 'bar',
  data: {
    labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
    datasets: [{
      label: "online tutorial subjects",
      data: [9, 8, 10, 7, 6, 12],
    }],
  },
  options: {
    responsive: false,
  },
});      
</script>   

描述

该图表遵循 JS 特性并解释其工作原理。

Canvas: 它有助于选择图形或图表的位置。
Chart: 此对象使用 canvas ID 来构建图表。
Type: 它提供了各种图形和图表类型。您选择所需的图形类型。
Labels: 标签为图形元素提供标题。示例包括 JavaScript、HTML 和 CSS。
Label: 标签为图形或图表提供标题。
Data: 它给出了相应图形组件的值。
Options: 此“chart.js”功能用于使用“options”函数来设置 UI 样式和动画图形。
Responsive: 响应式函数用于根据设备屏幕或图形大小显示图形。

Chart.js 工作流程

图表的一项功能是根据需求定位，称为 Chart.js。 chart.js 技术的两个基本方面是可访问性和数据结构。它提供了用于动画和交互式图表的“选项”。

步骤 1

使用“canvas”元素创建图形。可以添加样式和 HTML 元素。

 
<canvas id = "chartId" aria-label = "chart" heigth="500" width = "500"></canvas>   

步骤 2

获取 chart.js 对象和 canvas ID。

步骤 3

使用 Chart.js Type 显示特定图表。可以使用各种图形类型。

步骤 4

Chart.js 标签有助于创建图表组件。

步骤 5

根据元素范围排列数据集。

步骤 6

“options”元素用于高级图表和动画。

 
options: {
responsive: false,
},     

示例

以下示例显示了使用标签、数据和条形图的 chart.js 函数。我们可以在网页上为图形可见性设置不同的宽度和高度。

示例 1

以下示例显示了前端技术及其用户范围的基本条形图。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
 <body style="background-color:beige;">
  <h3> chart.js basic chart using data structure </h3>
  <canvas id = "chartData" aria-label = "chart"></canvas>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
 <script>
  var chrt = document.getElementById("chartData").getContext("2d");
  var chartId = new Chart(chrt, {
    type: 'bar',
    data: {
      labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
      datasets: [{
        label: "Online Front End Subjects",
        data: [20, 40, 50, 55, 45, 35],
      }],
    },
    options: {
      responsive: false,
    },
  });
  </script>
</body>
</html>   

输出

输出显示了使用 chart.js 技术的基本图表。

Chart.js Installation and Working Procedure

示例 2

以下示例显示了前端技术及其用户范围的基本条形图。我们可以为图表设置相等的高度和宽度。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
  <body style="background-color:beige;">

  <h3> chart.js basic chart using equal height and width </h3>
  <canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
 <script>
  var chrt = document.getElementById("chartData").getContext("2d");
  var chartId = new Chart(chrt, {
    type: 'bar',
    data: {
      labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
      datasets: [{
        label: "Online Front End Subjects",
        data: [20, 40, 50, 55, 45, 35],
      }],
    },
    options: {
      responsive: false,
    },
  });
  </script>
</body>
</html>   

输出

输出显示了使用 chart.js 技术的基本图表。

示例 3

以下示例显示了前端技术及其用户范围的基本条形图。我们可以设置图表的高度和宽度。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style="background-color:beige;">
 <h3> chart.js basic chart using Different height and width </h3>
  <canvas id = "chartData" aria-label = "chart" height = "500" width = "700"></canvas>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
 <script>
  var chrt = document.getElementById("chartData").getContext("2d");
  var chartId = new Chart(chrt, {
    type: 'bar',
    data: {
      labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
      datasets: [{
        label: "Online Front End Subjects",
        data: [20, 40, 50, 55, 45, 35],
      }],
    },
    options: {
      responsive: false,
    },
  });
  </script>
</body>
</html>   

输出

输出显示了使用 chart.js 技术的基本图表。

示例 4

以下示例显示了前端技术及其用户范围的基本条形图。我们可以使用带有“true”值的响应式选项来使用响应式图表。该图表根据网页大小或设备大小更改高度和宽度。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
 <body style="background-color:beige;">
  <h2> chart.js basic chart using responsive option </h2>
  <canvas id = "chartData" aria-label = "chart"></canvas>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"> 
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
 <script>
  var chrt = document.getElementById("chartData").getContext("2d");
  var chartId = new Chart(chrt, {
    type: 'bar',
    data: {
      labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
      datasets: [{
        label: "Online Front End Subjects",
        data: [20, 40, 50, 55, 35, 45],
        borderWidth: 3,
      }],
    },
    options: {
      responsive: true,
    },
  });
  </script>
</body>
</html>   

输出

输出显示了使用 chart.js 技术的基本图表。

结论

chart.js 的安装和工作过程比其他 JS 框架更容易、更简单。 char.js 用于基本图表的类型、数据、选项和其他子数据。我们可以创建响应式和非响应式（设置高度和宽度）图表。

下一个主题Chartjs-basics-concept

Chart.js 安装和工作流程

下载 Chart.js 库

Chart.js 的设置

Chart.js 语法

描述

Chart.js 工作流程

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

Chart.js 安装和工作流程

下载 Chart.js 库

Chart.js 的设置

Chart.js 语法

描述

Chart.js 工作流程

示例

结论

相关帖子

Chart.js 混合类型图表

Chart.js 常见问题

Chart.js 饼图

Chart.js 教程

Chart.js 选项和内边距

Chart.js 极地区域图

如何在 Chart.js 中自定义图例

Chart.js 图例

Chart.js 散点图

Chart.js 气泡图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器