Chart.js - 快速指南

Chart.js – 简介

什么是 Chart.js？

Chart.js 是一种流行的开源数据可视化框架，使我们能够生成以下图表类型 -

  • 散点图
  • 折线图
  • 条形图
  • 饼形图
  • 圆环图
  • 气泡图
  • 面积图
  • 雷达图
  • 混合图表

Chart.js 是一个社区维护的免费 JavaScript 库，用于制作基于 HTML 的图表。在使用 Chart.js 时，用户只需指明他希望在页面上的哪个位置显示图表以及他想要什么类型的图表。完成此操作后，用户需要向 Chart.js 提供数据、标签和一些其他设置。其余的事情将由图书馆自己管理。

Chart.js 功能

以下是 Chart.js 的功能 -

  • 开源免费库- Chart.js 是一个免费的开源社区维护的库，您可以在离线或在线模式下使用。

  • Canvas - 它为我们提供了动态图像的画布元素。

  • 内置图表- 为用户提供各种内置图表，如折线图、条形图、水平条形图、雷达图、气泡图等。

  • 可扩展至自定义图表- 您可以使用 Chart.js 库创建自定义图表。

  • 支持现代浏览器- Chart.js 支持所有现代浏览器。

  • 广泛的文档- Chart.js 文档组织良好，提供了有关每个功能的详细信息。即使对于新手用户来说，它也很容易理解和使用。

Chart.js - 优点

Chart.js 的优点如下：

  • Chart.js 为用户提供了 6 种不同的动画视图来可视化数据。

  • 它提供了大量的自定义选项以及交互扩展。

  • 它提供各种类型的交互式图表来显示数据。

  • 它完全免费使用。

  • 图表中数据的更新、删除和修改非常简单且轻松。

  • Chart.js由于其简单的结构可以在最小的空间内存储最大的数据。

  • Chart.js 使用多个 y 轴，因此它可以在单个图表中存储多个数据。

  • Chart.js 图表完全响应式。

  • 许多插件都可以通过 NPM 使用。事实上，您也可以编写自己的插件。

Chart.js - 限制

除了各种优点之外，Chart.js 还具有以下限制 -

  • Chart.js 仅显示具有变化的相似类型的数据。

  • Chart.js 的安装仅支持图形和图表的显示。它缺乏其他选项提供的灵活性。

  • canvas 元素是基于位图的。它与非矢量格式具有相同的问题。

与 Google Chart 和 Plotly.js 的比较

Chart.js 的主要竞争对手是另外两个 JavaScript 图表库，即plotly.js 和 Google Chart。

Google 图表使用网络服务来创建图表。虽然它提供了最多的图表，但它们没有提供足够的定制和交互性。另一方面，Chart.js 是一个免费的 JavaScript 图表库，它提供的图表较少，但具有出色的自定义和交互选项。总而言之，如果您需要没有任何复杂交互的图表，那么请选择 Google 图表。如果您需要一组配置最少的简单图表，那么 Chart.js 将是您的选择。

Chart.js 和 Plotly.js 都是开源免费使用的图表工具。Chart.js 是动画、基于 HTML5 且响应式的，而 Plotly.js 是一个在线图表编辑器，支持 MatLab、Python 和 R 编程语言，具有完全的交互性。Chart.js 的文档比plotly.js 简单。

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

Chart.js - 语法

要使用 Chart.js 库创建图表，我们需要了解有关图表的以下详细信息 -

  • 图表的位置
  • 图表类型
  • 图表配置
  • 反应能力

让我们以一个简单的 Chart.js 为例，了解如何在代码中提供这些数据 -

例子

在此示例中，我们将使用 Chart.js 库创建一个基本图表 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <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/helpers.esm.min.js"></script>
   <canvas id="graph" aria - label="chart" height="350" width="580"></canvas>
   <script>
      var chrt = document.getElementById("graph");
      var graph = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [9, 8, 10, 7, 6, 12],
            }],
         },
         options: {
            responsive: true,
         },
      });
   </script>
</body>
</html>

使用“编辑并运行”选项并运行此代码以查看其生成的图表类型。

描述

下面给出的是 Chart.js 语法中使用的各种对象的描述 -

  • Canvas - 它帮助我们选择图形或图表的位置。您可以提供图表的高度和宽度。

  • 图表- 顾名思义，该对象将使用画布 id 创建图表或图形。

  • 类型- 提供多种类型的图表和图表，如饼图、条形图、气泡图等。您可以根据需要选择图表类型。

  • 标签- 标签将标题分配给图形或图表的不同元素。例如，HTML、CSS、JAVASCRIPT 等是上面给出的示例中的标签。

  • 标签- 与标签类似，对象标签将标题分配给图形或图表本身。

  • 数据- 数据对象提供图形元素的值。例如，9、8、10、7、12等是在上面给出的示例中分配给各种标签的数据。

  • 选项- 选项对象添加的是动画、集成、响应我们的图形或图表等功能。

Chart.js - 基础知识

要了解 Chart.js 的基础知识，让我们逐步了解如何使用 Chart.js 库创建简单的条形图 -

步骤 1 - 首先我们需要使用 canvas 对象创建一个画布 id。在这里我们可以添加各种样式和 HTML 元素。我们还需要提供图形或图表的高度和宽度。让我们看看如何创建它 -

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

步骤 2 - 现在，我们需要访问画布 Id和 Chart.js 对象，如下所示 -

var chrt = document.getElementById("chartId").getContext("2d");

步骤 3 - 接下来使用 Chart.js Type对象指定您需要的图表或图形类型。有多种类型的图表可供选择。

type: 'bar',

步骤 4 - 如果您想为图形或图表的元素添加标签，您可以使用 Chart.js“标签”对象，如下所示 -

labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],

同样，您还可以使用标签对象提供图形或图表的标签，如下所示 -

label: "Online Tutorial Subjects"

步骤 5 - 对于图表，给出图表或图表的元素值。它可以在数据对象的帮助下完成，如下所示 -

data: [20, 40, 30, 10, 40, 20]

步骤 6 - 您还可以通过使用选项对象来应用一些高级功能，例如动画、响应式等 -

options: {
   responsive: false,
},

例子

在此示例中，我们将创建一个条形图，显示在线教程的各种主题。

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></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/helpers.esm.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "Online Tutorial Subjects",
               data: [20, 40, 30, 35, 30, 20],
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

图表基础

Chart.js - 颜色

Chart.js 库为我们提供了各种格式，借助它们我们可以轻松地为图表或图形选项提供颜色。您可以使用以下符号将颜色指定为字符串 -

  • 十六进制
  • RGB
  • HSL

如果您没有指定任何颜色并且图表需要颜色，Chart.js 将使用全局默认颜色。下表提供了存储在“Chart.defaults”中的 3 种颜色选项 -

姓名 类型 默认 描述
背景颜色 颜色 RGBA(0, 0, 0, 0.1) 背景颜色
边框颜色 颜色 RGBA(0, 0, 0, 0.1) 边框颜色
颜色 颜色 第666章 字体颜色

例子

让我们举一个例子，我们将在图表中设置颜色 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
               borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

此 HTML 代码将生成以下图表，其中具有不同颜色的图形元素 -

Chart.js 颜色

Chart.js - 选项

在 Chart.js 中，使用上下文相关的路由，选项从代码顶部解析到代码底部。我们有不同级别的选项，如下所示 -

图表级别选项

我们有三个图表级别选项 -

  • 选项
  • 覆盖
  • 默认值

数据集级别选项

Chart.js 为我们提供了以下在数据集级别使用的选项 -

  • 数据集
  • 选项.数据集
  • 选项
  • 覆盖
  • 默认数据集
  • 默认值

数据集动画选项

Chart.js 为我们提供了以下可在数据集动画级别使用的选项 -

  • 数据集.动画
  • 选项.数据集.动画
  • 选项.动画
  • 覆盖.datasets.animation
  • 默认数据集动画
  • 默认动画

数据集元素级别选项

Chart.js 为我们提供了以下可在数据集元素级别使用的选项 -

  • 数据集
  • 选项.数据集
  • 选项.数据集.元素
  • 选项.元素
  • 选项
  • 覆盖.datasets
  • 覆盖.datasets.elements
  • 默认数据集
  • defaults.datasets.elements
  • 默认元素
  • 默认值

比例选项

Chart.js 为我们提供了以下比例选项 -

  • 选项.scale
  • 覆盖.scales
  • 覆盖.datasets.elements
  • 默认值.scales
  • 默认值.scale

插件选项

Chart.js 为我们提供了以下插件选项，其中提供了路径数组来另外查找其选项 -

  • 选项.scale
  • 选项.插件[插件.id]
  • （选项。[...插件.additionalOptionScopes]）
  • 覆盖[config.type].plugins[plugin.id]
  • defaults.plugins[插件.id]
  • （默认值。[...plugin.additionalOptionScopes]）

例子

让我们举一个例子，我们将在图表中使用各种选项-

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "online tutorial subjects",
            data: [20, 40, 30, 35, 30, 20],
            backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
            borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
            borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            layout: {
               padding: {
                  left: 40,
                  right: 40,
               }
            },
            plugins: {
               legend: {
                  labels: {
                     font: {
                        size: 25,
                        family: 'Helvetica',
                        style: 'bold',
                     }
                  }
               }
            }
         },
      });
   </script>
</body>
</html>

输出

以下输出图表显示了元素的填充和字体样式 -

Chart.js 选项

Chart.js - 交互

Chart.js 交互帮助我们与图表的元素进行通信。您可以使用悬停和工具提示来应用这些交互。下表给出了我们可以使用的各种交互的描述 -

姓名 类型 默认 描述
模式 细绳 ‘最近’ 它将设置哪些元素出现在交互中。
相交 布尔值 真的 相交可用于设置鼠标位置。如果您保持这一点，则交互模式仅在鼠标位置与图表上的项目相交时应用，否则不应用。
轴 细绳 'X' 轴可以设置为“x”、“y”、“xy”或“r”。

它定义了计算距离时使用的方向。对于索引模式，默认值为“x”。而“xy”是“最近”模式的默认值。
包括不可见 布尔值 错误的 如果为 false，则在评估交互时将不包括图表区域之外的不可见点。

在图表中使用交互的命名空间是“options.interactions”。

同样，下表描述了图表如何与事件交互 -

姓名 类型 默认 描述
活动 细绳[] ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'] 此选项定义图表应侦听的浏览器事件。
悬停时 功能 无效的 当任何事件在我们的图表区域上触发时，将调用此事件。）。
单击时 功能 无效的 如果事件类型为

在我们的图表区域上“鼠标松开”、“单击”或“上下文菜单”。

句法

交互语法如下 -

interaction: {
   mode: 'nearest',
}

Chart.js 事件语法如下 -

events: ['click'],

例子

让我们举一个例子，我们将在图表中使用各种交互和事件-

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
               borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            events: ['click'],
            interaction: {
               mode: 'nearest',
            }
         },
      });
   </script>
</body>
</html>

输出

它将生成以下具有各种交互和事件的图表-

Chart.js 交互

Chart.js - 图例

Chart.js 图例显示有关将在我们的图表或图形上看到的数据集的数据。图例配置选项的命名空间是 options.plugins.legend，而图表图例的全局选项在 Chart.defaults.plugins.legend 中定义。

下表给出了我们可以与图表图例一起使用的各种配置选项的描述 -

姓名 类型 默认 描述
展示 布尔值 真的 如果为真，它将显示图例，否则不显示。
位置 细绳 '顶部' 它用于设置图例的位置。默认为顶部位置。
对齐 细绳 '中心' 它用于设置图例的对齐方式。默认为中心位置。
最大高度 数字 它将设置图例的最大高度（以像素为单位）。
最大宽度 数字 它将设置图例的最大宽度（以像素为单位）
全尺寸 布尔值 真的 顾名思义，如果为 true，则该框将占据画布的整个宽度/高度。
单击时 功能 它是一个回调函数，当您在标签项上注册单击事件时调用。
悬停时 功能 它是一个回调函数，当您在标签项顶部注册“mousemove”事件时调用。
休假 功能 它是一个回调函数，当您在先前悬停的标签项之外注册“mousemove”事件时会调用该函数。
撤销 布尔值 错误的 顾名思义，使用此配置，图例将以相反的顺序显示数据集。如果为 false，则为默认值。
标签 目的 您可以使用各种图例标签配置，例如颜色、字体、填充、boxWidth、boxHeight 等。
保留时间 布尔值 如果为 true，图例将从右向左呈现。
文本方向 细绳 画布的默认值 顾名思义，此配置将强制画布上的文本方向“rtl”或“ltr”来渲染图例，无论画布上指定的 css 如何
标题 目的 您可以使用各种图例标题配置，例如颜色、字体、填充、文本、显示等。

句法

图表图例语法如下 -

legend: {
   display: true,
   position: 'bottom',
   labels: { color: 'darkred', }
}

图例启用属性必须为true才能显示数据标签。如果它设置为false，则图例将被停用。

例子

让我们举一个例子，我们将使用各种图例配置 -

<!DOCTYPE html>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> chart.js</title>
</head>
<body>
   <canvas id="toolTip" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "line",
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
               borderColor: [
                  "black",
               ],
               borderWidth: 1,
               pointRadius: 5,
            }],
         },
         options: {
               responsive: false,
               plugins: {
                  legend: {
                     display: true,
                     position: 'bottom',
                     align: 'center',
                     labels: {
                        color: 'darkred',
                        font: {
                           weight: 'bold'
                        },
                     }
                  }
               }
            }
         });
   </script>
</body>
</html>

输出

看一下输出。它显示了各种图例配置 -

Chart.js 图例

Chart.js - 标题

Chart.js 标题定义了将在图表或图形顶部看到的文本。标题配置的命名空间是 options.plugins.title，而图表标题的全局选项在 Chart.defaults.plugins.title 中定义。

下表给出了我们可以与图表标题一起使用的各种配置选项的描述 -

姓名 类型 默认 描述
对齐 细绳 '中心' 顾名思义，使用此配置您可以设置标题的对齐方式。
颜色 颜色 图表.默认值.颜色 它将定义文本的颜色。
展示 布尔值 错误的 如果为真，它将显示标题，否则不显示。
全尺寸 布尔值 真的 顾名思义，如果为 true，则该框将占据画布的整个宽度/高度。
位置 细绳 '顶部' 它用于设置标题的位置。默认为顶部位置。
字体 字体 {权重：'粗体'} 您可以使用各种字体。选项位于“Chart.defaults.font”中。
填充 填充 10 它用于在标题周围应用填充。
文本 字符串|字符串[] ” 顾名思义，它用于显示标题文本。

句法

图表标题语法如下 -

title: {
   display: true,
   text: 'write heading here',
   color: 'navy',
   position: 'bottom',
}

titleenabled属性必须为true才能显示数据标签。如果它设置为false，则标题将被停用。

例子

让我们举一个例子，我们将使用各种标题配置 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
               borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            plugins: {
               title: {
                  display: true,
                  text: 'Web Application Technologies',
                  color: 'navy',
                  position: 'bottom',
                  align: 'center',
                  font: {
                     weight: 'bold'
                  },
                  padding: 8,
                  fullSize: true,
               }
            }
         },
      });
   </script>
</body>
</html>

输出

以下输出图表显示了各种标题配置 -

Chart.js 标题

Chart.js - 动画

Chart.js 动画用于为图表或图形设置动画。它为我们提供了各种选项来配置动画并设置动画显示的时间。动画配置的命名空间是“options.animation”。

下表给出了我们可以与图表动画一起使用的各种配置选项的描述 -

姓名 类型 默认 描述
期间 数字 1000 它将设置图表中的动画所需的毫秒数。
缓和 细绳 'easeOutQuart' 这是我们将用于动画的缓动函数。有些选项是线性、easeInQuad、easeOutQuad、easeInOutBounce 等。
延迟 数字 不明确的 顾名思义，它表示开始动画之前的延迟。
环形 布尔值 不明确的 如果为 true，图表中的动画将无限循环。

句法

图表动画语法如下 -

animations: {
   tension: {
      duration: 750,
      easing: 'easeInBounce',
      from: 1,
      to: 0,
      loop: true
   }
},
scales: {
   y: {
      min: 0,
      max: 45,
   }
}

动画“循环”属性必须为 true 才能生成动画。如果它设置为 false，则“动画”将被停用。

例子

让我们举一个例子，我们将使用各种动画配置 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> chart.js</title>
</head>
<body>
   <canvas id="toolTip" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "line",
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "online tutorial subjects",
            data: [20, 40, 30, 35, 30, 20],
            backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
            borderColor: [
            "black",
            ],
            borderWidth: 1,
            pointRadius: 5,
            }],
         },
         options: {
            responsive: false,
            animations: {
               tension: {
               duration: 750,
               easing: 'easeInBounce',
               from: 1,
               to: 0,
               loop: true
               }
            },
            scales: {
               y: {
                  min: 0,
                  max: 45,
               }
            }
         }
      });
   </script>
</body>
</html>

输出

使用“编辑并运行”选项运行代码并查看图表在应用动画时的Behave方式。

以下输出图表显示了各种动画配置 -

Chart.js 动画

Chart.js - 工具提示

Chart.js Tooltip 为我们提供了在图表中显示工具提示文本的选项。工具提示是一个图形 UI 元素，当我们将鼠标悬停在图表元素上时，它会提供额外的信息。动画配置的命名空间是options.plugins.tooltip。

句法

图表工具提示语法如下 -

options: {
   plugins: {
      tooltip: {
         enabled: true,
         (Write tooltip's style element)
      },
   }
}

工具提示启用属性必须为true才能显示数据标签。如果它设置为false，则工具提示将被停用。

例子

让我们举一个例子，我们将使用各种工具提示配置 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></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/helpers.esm.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
               borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
            plugins: {
               tooltip: {
                  enabled: true,
                  usePointStyle: true,
                  titleAlign: 'center',
                  titleColor: 'gold',
                  titleSpacing: 3,
                  TitleFont: {
                     weight: 'bold'
                  },
                  backgroundColor: 'midnightblue',
                  bodyColor: 'orange',
                  bodyAlign: 'center',
                  bodyFont: {
                     weight: 'italic'
                  },
                  callbacks: {
                     labelPointStyle: function(context) {
                        return {
                           pointStyle: 'circle',
                           rotation: 0
                        };
                     },
                  }
               }
            }
         },
      });
   </script>
</body>
</html>

使用“编辑并运行”选项在线执行代码，然后将鼠标悬停在栏上并观察工具提示的样式。

输出

以下输出图表显示了各种工具提示配置 -

Chart.js 工具提示

Chart.js - 折线图

Chart.js 折线图，顾名思义，是一种将数据点绘制在一条线上的方法。在大多数情况下，折线图用于显示数据的趋势或数据集之间的比较。

以下是折线图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.line - 它提供所有线数据集的选项。

  • options.elements.line - 它提供所有行元素的选项。

  • options.elements.point - 它为所有点元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用“ type:line ”来创建折线图。

例子

让我们举一个例子，借助它我们将创建一个折线图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" heigth="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'line',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
               borderColor: ['black'],
               borderWidth: 2,
               pointRadius: 5,
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

以下输出显示了折线图的创建 -

Chart.js 折线图

Chart.js - 条形图

Chart.js 条形图，顾名思义，是一种将数据值绘制为垂直条形的方法。在大多数情况下，折线图用于显示数据趋势以及并排两个以上数据集之间的比较。

以下是条形图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.bar - 它提供所有条形数据集的选项。

  • options.elements.bar - 它为所有栏元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用 type: 'bar' 来创建条形图。

例子

让我们举一个例子，借助它我们将创建一个条形图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></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/helpers.esm.min.js">
   </script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 30, 35, 30, 20],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
               borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
               borderWidth: 2,
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

通过执行上面的代码，我们将得到以下输出图表 -

Chart.js 条形图

Chart.js - 雷达图

Chart.js 雷达图，顾名思义，用于显示多个数据点以及这些数据点之间的差异。借助雷达图，我们可以轻松比较两个或多个不同数据集的点。

以下是雷达图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.line - 它提供所有线数据集的选项。

  • options.elements.line - 它提供所有行元素的选项。

  • options.elements.point - 它为所有点元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用type:“radar”来创建雷达图。

例子

让我们举一个例子，借助它我们将创建一个雷达图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'radar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 33, 35, 30, 38],
               backgroundColor: ['lightgrey'],
               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
               borderColor: ['black'],
               borderWidth: 1,
               pointRadius: 6,
            }],
         },
         options: {
            responsive: false,
            elements: {
               line: {
                  borderWidth: 3
               }
            }
         },
      });
   </script>
</body>
</html>

输出

Chart.js 雷达图

Chart.js - 圆环图

Chart.js 圆环图是最常用的表示数据集的图表之一。圆环图分为多个部分，每个部分的弧线显示每条数据的比例值。如果你想展示数据之间的关系比例，圆环图是一个很好的选择。

以下是圆环图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.doughnut - 它为所有甜甜圈数据集提供选项。

  • options.elements.arc - 它为所有弧元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用 type: 'doughnut' 来创建圆环图。

例子

让我们举一个例子，借助它我们将创建一个圆环图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'doughnut',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "online tutorial subjects",
            data: [20, 40, 13, 35, 20, 38],
            backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
            hoverOffset: 5
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

圆环图

Chart.js - 饼图

Chart.js 饼图是另一种最常用的表示数据集的图表。与圆环图一样，饼图也分为各个部分，每个部分的弧线显示了每条数据的比例值。如果你想展示数据之间的关系比例，饼图也是一个不错的选择。

圆环图和饼图之间的区别在于它们的剪切值，相当于应剪切内部的哪一部分。对于饼图，cutout 的默认值为 0，而对于圆环图，则为 50%。

以下是饼图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.pie - 它提供所有饼图数据集的选项。

  • options.elements.arc - 它为所有弧元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用type: "pie"来创建饼图。

例子

让我们举一个例子，借助它我们将创建一个饼图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'pie',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 13, 35, 20, 38],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
               hoverOffset: 5
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

它将生成以下饼图作为输出 -

饼形图

Chart.js - 极地面积图

Chart.js 极地面积图类似于饼图。唯一的区别是，在极面积图中，每个线段具有相同的角度，即线段的半径根据值而不同。如果您想显示数据之间的比较，但也想显示上下文的值范围，极坐标面积图是一个很好的选择。

以下是极地面积图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.polarArea - 它提供所有 PolarArea 数据集的选项。

  • options.elements.arc - 它为所有弧元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用type: "polar"来创建极地面积图。

例子

让我们举一个例子，我们将在其帮助下创建极地面积图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'polarArea',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 15, 35, 25, 38],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

极地面积图

Chart.js - 气泡图

Chart.js为我们提供了一种借助气泡图同时展示三维数据的方法。气泡的前两个维度以及相应的水平轴和垂直轴决定了气泡在图表中的位置。而第三维则用气泡的大小来表示。

以下是气泡图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.bubble - 它为所有气泡数据集提供选项。

  • options.elements.point - 它为所有点元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用type: "bubble"来创建气泡图。

例子

让我们举一个例子，借助它我们将创建一个气泡图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="300" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bubble',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [{
                     x: 20,
                     y: 21,
                     z: 20
                  },
                  {
                     x: 25,
                     y: 25,
                     z: 25
                  },
                  {
                     x: 13,
                     y: 11,
                     z: 25
                  },
                  {
                     x: 40,
                     y: 18,
                     z: 25
                  },
                  {
                     x: 31,
                     y: 28,
                     z: 25
                  },
                  {
                     x: 27,
                     y: 35,
                     z: 35
                  }
               ],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
               borderColor: ['black'],
               radius: 8,
            }],
         },
         options: {
         responsive: false,
         },
      });
   </script>
</body>
</html>

输出

气泡图

Chart.js - 散点图

Chart.js 散点图基本上基于简单的折线图，但其 X 轴改为线性轴。创建散点图时，必须将数据作为包含 X 和 Y 属性的对象传递。

以下是气泡图中用于数据集属性的命名空间 -

  • data.datasets[index] - 它仅提供此数据集的选项。

  • options.datasets.scatter - 它为所有分散数据集提供选项。

  • options.datasets.line - 它提供所有线数据集的选项。

  • options.elements.point - 它为所有点元素提供选项。

  • 选项- 它提供整个图表的选项

我们需要使用type: "scatter"来创建散点图。

例子

让我们举一个例子，借助它我们将创建一个散点图 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="300" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'scatter',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [
                  {x:10, y:14},
                  {x:25, y:35},
                  {x:21, y:20},
                  {x:35, y:28},
                  {x:15, y:10},
                  {x:19, y:30},
               ],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
               borderColor: ['black'],
               radius: 8,
            }],
         },
         options: {
            responsive: false,
            scales: {
               x: {
                  type: 'linear',
                  position: 'bottom,'
               }
            }
         },
      });
   </script>
</body>
</html>

输出

散点图

Chart.js - 混合图表

Chart.js 还为我们提供了创建具有两种或不同图表类型组合的图表的工具。此类图表称为混合图表。Chart.js 混合图表最常见的示例之一是包含折线数据集的条形图。

句法

创建混合图表的语法如下 -

type: 'scatter',
datasets: [
   { type: 'scatter', data: value, },
   { type: 'bar', data: value, },
]

例子

让我们举一个例子，借助它我们将创建一个混合图表 -

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="300" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'scatter',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
                  type: 'scatter',
                  label: "online tutorial subjects",
                  data: [
                     {x:10, y:14},
                     {x:25, y:35},
                     {x:21, y:20},
                     {x:35, y:28},
                     {x:15, y:10},
                     {x:19, y:30}
                  ],
                  backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
                  borderColor: ['black'],
                  radius: 8,
               },
               {
                  type: 'polarArea',
                  label: "online tutorial exam",
                  data: [20, 40, 30, 35, 30, 20],
                  backgroundColor: ['navy', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
                  borderColor: ['black'],
                  borderWidth: 2,
                  pointRadius: 5,
               }
            ],
         },
         options: {
            responsive: false,
            scales: {
               y: {
                  beginAtZero: true
               }
            }
         },
      });
   </script>
</body>
</html>

输出

混合图表

Chart.js - 笛卡尔轴

对于任何图表或图形，轴都是不可或缺的一部分。基本上，轴用于确定我们的数据如何映射到图表上的像素值。笛卡尔图表使用 1 个或多个 X 轴和 1 个或多个 Y 轴将数据点映射到二维 (2-D) 画布上。这些轴称为笛卡尔轴。

笛卡尔轴使用“ options.scales.axis ”命名空间。使用笛卡尔轴的语法如下 -

scales: {
   x: {
      grid: {
         color: