Chart.js - 快速指南

什麼是 Chart.js？

Chart.js 是一個流行的開源資料視覺化框架，它使我們能夠生成以下圖表型別：

散點圖
線形圖
條形圖
餅圖
環形圖
氣泡圖
面積圖
雷達圖
組合圖

Chart.js 是一個由社群維護的免費 JavaScript 庫，用於建立基於 HTML 的圖表。使用 Chart.js 時，使用者只需指定頁面上希望圖表顯示的位置以及希望使用的圖表型別。完成這些操作後，使用者需要向 Chart.js 提供資料、標籤和一些其他設定。其餘的事情將由庫本身管理。

Chart.js 特性

以下是 Chart.js 的特性：

開源免費庫 - Chart.js 是一個免費的開源社群維護的庫，您可以在離線或線上模式下使用它。
畫布 - 它為我們提供了用於動態影像的畫布元素。
內建圖表 - 它為使用者提供了各種內建圖表，例如線形圖、條形圖、水平條形圖、雷達圖、氣泡圖等，供使用者使用。
可擴充套件到自定義圖表 - 您可以使用 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 的安裝僅支援圖形和圖表的顯示。它缺乏其他選項提供的靈活性。
畫布元素是基於點陣圖的。它與非向量格式共享相同的問題。

與 Google Chart 和 Plotly.js 的比較

Chart.js 與另外兩個 JavaScript 圖表庫（即 plotly.js 和 Google chart）存在主要競爭關係。

Google chart 使用 Web 服務建立圖表。雖然它提供了最多的圖表，但它們沒有提供足夠的自定義和互動性。另一方面，Chart.js 是一個免費的 JavaScript 圖表庫，它提供的圖表較少，但具有出色的自定義和互動選項。總而言之，如果您需要沒有任何複雜互動的圖表，那麼請選擇 Google Charts。如果您需要簡單的圖表集且配置最少，那麼 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。現在，複製 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 中包含一個指令碼標籤，該標籤連結到 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>

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 語法中使用的各種物件的描述：

畫布 - 它幫助我們選擇圖形或圖表的位置。您可以提供圖表的高度和寬度。
圖表 - 顧名思義，此物件將使用畫布 ID 建立圖表或圖形。
型別 - 它提供了各種型別的圖形和圖表，例如餅圖、條形圖、氣泡圖等。您可以根據需要選擇圖形型別。
標籤 - 標籤為圖形或圖表的不同元素分配標題。例如，在上面給出的示例中，HTML、CSS、JAVASCRIPT 等是標籤。
標籤 - 與標籤類似，物件標籤為圖形或圖表本身分配標題。
資料 - 資料物件提供圖形元素的值。例如，9、8、10、7、12 等是在上面給出的示例中為各種標籤分配的資料。
選項 - 選項物件添加了動畫、整合、響應式等功能到我們的圖形或圖表中。

Chart.js - 基礎

要了解 chart.js 的基礎知識，讓我們一步一步地瞭解如何使用 chart.js 庫建立簡單的條形圖：

步驟 1 - 首先，我們需要使用畫布物件建立一個畫布 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: '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 種顏色選項：

名稱	型別	預設值	描述
backgroundColor	顏色	rgba(0, 0, 0, 0.1)	背景顏色
borderColor	顏色	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 中，使用上下文相關的路由，選項從程式碼頂部解析到程式碼底部。我們有不同級別的選項，如下所示：

圖表級別選項

我們有三個圖表級別選項：

options
overrides
defaults

資料集級別選項

Chart.js 為我們在資料集級別提供了以下選項：

dataset
options.datasets
options
overrides
defaults.datasets
defaults

資料集動畫選項

Chart.js 為我們在資料集動畫級別提供了以下選項：

Dataset.animation
options.datasets.animation
options.animation
overrides.datasets.animation
defaults.datasets.animation
defaults.animation

資料集元素級別選項

Chart.js 為我們在資料集元素級別提供了以下選項：

Dataset
options.datasets
options.datasets.elements
options.elements
options
overrides.datasets
overrides.datasets.elements
defaults.datasets
defaults.datasets.elements
defaults.elements
defaults

刻度選項

Chart.js 為我們提供了以下刻度選項：

options.scale
overrides.scales
overrides.datasets.elements
defaults.scales
defaults.scale

外掛選項

Chart.js 為我們提供了以下外掛選項，這些選項提供了要額外在其內部查詢其選項的路徑陣列：

options.scale
options.plugins[plugin.id]
(options.[...plugin.additionalOptionScopes])
overrides[config.type].plugins[plugin.id]
defaults.plugins[plugin.id]
(defaults.[...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 互動幫助我們與圖表元素進行通訊。您可以使用懸停和工具提示來應用這些互動。下表提供了我們可以使用的各種互動型別的描述：

名稱	型別	預設值	描述
模式	字串	'nearest'	它將設定哪些元素出現在互動中。
Intersect	布林值	true	Intersect 可用於設定滑鼠位置。如果將此設定為 true，則互動模式僅在滑鼠位置與圖表上的專案相交時才適用，否則不適用。
軸	字串	'x'	軸可以設定為'x'、'y'、'xy'或'r'。它定義了用於計算距離的方向。對於索引模式，預設值為'x'。而'xy'是'nearest'模式的預設值。
includeInvisible	布林值	false	如果為 false，則在評估互動時，將不包括圖表區域之外的不可見點。

在我們的圖表中使用互動的名稱空間是“options.interactions”。

同樣，下表提供了圖表如何與事件互動的描述：

名稱	型別	預設值	描述
事件	字串[]	['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']	此選項定義了圖表應該監聽的瀏覽器事件。
onHover	函式	Null	當任何事件在我們的 chartArea 上觸發時，將呼叫此事件。）
onClick	函式	Null	如果事件型別為，則將呼叫此事件 'mouseup'、'click'或'contextmenu'在我們的 chartArea 上。

語法

互動語法如下所示：

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 圖例顯示了將在我們的圖表或圖形上看到的資料集相關資料。圖例配置選項的名稱空間為 options.plugins.legend，而圖表圖例的全域性選項定義在 Chart.defaults.plugins.legend 中。

下表提供了我們可以與圖表圖例一起使用的各種配置選項的描述：

名稱	型別	預設值	描述
顯示	布林值	true	如果為 true，則將顯示圖例，否則不顯示。
位置	字串	'top'	用於設定圖例的位置。預設為頂部位置。
對齊	字串	'center'	用於設定圖例的對齊方式。預設為居中位置。
maxHeight	數字		它將以畫素為單位設定圖例的最大高度。
maxWidth	數字		它將以畫素為單位設定圖例的最大寬度。
fullSize	布林值	true	顧名思義，如果為 true，則框將佔據畫布的全部寬度/高度。
onClick	函式		這是一個回撥函式，當您在標籤項上註冊點選事件時呼叫。
onHover	函式		這是一個回撥函式，當您在標籤項頂部註冊“mousemove”事件時呼叫。
onLeave	函式		這是一個回撥函式，當您在先前懸停的標籤項外部註冊“mousemove”事件時呼叫。
Reverse	布林值	false	顧名思義，使用此配置，圖例將以相反的順序顯示資料集。預設值為 false。
標籤	物件		您可以使用各種圖例標籤配置，例如顏色、字型、填充、boxWidth、boxHeight 等。
Rtl	布林值		如果為 true，則圖例將從右到左呈現。
textDirection	字串	畫布的預設值	顧名思義，此配置將強制在畫布上渲染圖例時使用文字方向“rtl”或“ltr”，而不管在畫布上指定的 css 如何。
標題	物件		您可以使用各種圖例標題配置，例如顏色、字型、填充、文字、顯示等。

語法

圖表圖例語法如下所示：

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

必須將圖例**enabled**屬性設定為**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 標題定義了將在圖表或圖形頂部顯示的文字。標題配置的名稱空間為 options.plugins.title，而圖表標題的全域性選項定義在 Chart.defaults.plugins.title 中。

下表提供了我們可以與圖表標題一起使用的各種配置選項的描述：

名稱	型別	預設值	描述
align	字串	'center'	顧名思義，使用此配置，您可以設定標題的對齊方式。
color	顏色	Chart.defaults.color	它將定義文字的顏色。
display	布林值	false	如果為 true，則將顯示標題，否則不顯示。
fullSize	布林值	true	顧名思義，如果為 true，則框將佔據畫布的全部寬度/高度。
position	字串	'top'	用於設定標題的位置。預設為頂部位置。
font	字型	{weight: 'bold'}	您可以使用各種字型。“Chart.defaults.font”中提供了選項。
padding	填充	10	用於在標題周圍應用填充。
text	字串\|字串[]	''	顧名思義，它用於顯示標題文字。

語法

圖表標題語法如下所示：

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

必須將標題**enabled**屬性設定為**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 動畫用於為圖表或圖形設定動畫。它為我們提供了各種選項來配置動畫並設定動畫顯示時間的時長。動畫配置的名稱空間為“options.animation”。

下表提供了我們可以與圖表動畫一起使用的各種配置選項的描述：

名稱	型別	預設值	描述
duration	數字	1000	它將設定圖表中動畫持續的毫秒數。
easing	字串	'easeOutQuart'	它是我們將用於動畫的緩動函式。一些選項包括 linear、easeInQuad、easeOutQuad、easeInOutBounce 等。
delay	數字	undefined	顧名思義，它表示開始動畫之前的延遲。
loop	布林值	undefined	如果為 true，則圖表中的動畫將無限迴圈。

語法

圖表動畫語法如下所示：

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

動畫“loop”屬性必須為 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>

輸出

使用“編輯並執行”選項執行程式碼，並檢視圖表在應用動畫後的行為。

以下輸出圖表顯示了各種動畫配置：

Chart.js - 提示框

Chart.js 工具提示為我們提供了一個選項，可以在圖表中顯示工具提示文字。工具提示是一個圖形化 UI 元素，當我們將滑鼠懸停在圖表元素上時，它會提供額外的資訊。動畫配置的名稱空間為**options.plugins.tooltip**。

語法

圖表工具提示語法如下所示：

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

必須將工具提示**enabled**屬性設定為**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 線形圖，顧名思義，是一種在直線上繪製資料點的方法。在大多數情況下，線形圖用於顯示資料的趨勢或資料集之間的比較。

以下是線形圖中用於資料集屬性的名稱空間：

**data.datasets[index]** - 它僅為該資料集提供選項。
**options.datasets.line** - 它為所有線形資料集提供選項。
**options.elements.line** - 它為所有線形元素提供選項。
**options.elements.point** - 它為所有點元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用“**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 條形圖，顧名思義，是一種將資料值繪製成垂直條形的方法。在大多數情況下，折線圖用於顯示資料的趨勢以及兩個以上資料集並排的比較。

以下是條形圖中用於資料集屬性的名稱空間：

**data.datasets[index]** - 它僅為該資料集提供選項。
options.datasets.bar - 它為所有條形資料集提供選項。
options.elements.bar - 它為所有條形元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用 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 雷達圖，顧名思義，用於顯示多個數據點以及這些資料點之間的差異。藉助雷達圖，我們可以輕鬆比較兩個或多個不同資料集的點。

以下是雷達圖中用於資料集屬性的名稱空間：

**data.datasets[index]** - 它僅為該資料集提供選項。
**options.datasets.line** - 它為所有線形資料集提供選項。
**options.elements.line** - 它為所有線形元素提供選項。
**options.elements.point** - 它為所有點元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用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 環形圖是最常用的圖表之一，用於表示資料集。環形圖被分成不同的扇區，每個扇區的弧度顯示每個資料片段的比例值。如果您想顯示資料之間的關係比例，環形圖是一個極好的選擇。

以下是環形圖中用於資料集屬性的名稱空間：

**data.datasets[index]** - 它僅為該資料集提供選項。
options.datasets.doughnut - 它為所有環形資料集提供選項。
options.elements.arc - 它為所有弧形元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用 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 值，該值等於內部應切出的部分。對於餅圖，cutout 的預設值為 0，而對於環形圖，則為 50%。

以下是餅圖中用於資料集屬性的名稱空間：

**data.datasets[index]** - 它僅為該資料集提供選項。
options.datasets.pie - 它為所有餅圖資料集提供選項。
options.elements.arc - 它為所有弧形元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用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 - 它為所有弧形元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用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** - 它為所有點元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用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** - 它為所有點元素提供選項。
**Options** - 它為整個圖表提供選項。

我們需要使用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: 'orange',
         borderColor: 'orange',
      }
   }
}

示例

讓我們舉一個使用笛卡爾座標軸建立圖表的例子：

<!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>
   <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: ['black'],
               borderWidth: 1,
               pointRadius: 4,
            }],
         },
         options: {
            responsive: false,
            indexAxis: 'y',
            scales: {
               x: {
                  grid: {
                     color: 'orange',
                     borderColor: 'orange',
                  }
               }
            }
         },
      });
   </script>
</body>
</html>

輸出

Chart.js - 類別軸

座標軸是任何圖表或圖形不可或缺的一部分。與笛卡爾座標軸一樣，類別座標軸也是圖表的重要組成部分。

在全域性定義類別座標軸的語法如下所示：

let chart = new Chart(ctx, {
   type: ...
   data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June'],
      datasets: ...
   }
});

我們可以作為軸的一部分定義類別座標軸，如下所示：

let chart = new Chart(ctx, {
   type: ...
   data: ...
   options: {
      scales: {
         x: {
            type: 'category',
            labels: ['January', 'February', 'March', 'April', 'May', 'June']
         }
      }
   }
});

示例

讓我們舉一個使用類別座標軸建立圖表的例子：

<!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 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: ['black'],
               borderWidth: 1,
               pointRadius: 4,
            }],
         },
         options: {
            responsive: false,
            scales: {
               x: {
                  min: 'CSS',
                  max: 'JQUERY'
               }
            }
         },
      });
   </script>
</body>
</html>

輸出

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>
   <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: '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,
            scales: {
               r: {
                  suggestedMin: 40,
                  suggestedMax: 40
               }
            }
         },
      });
   </script>
</body>
</html>

輸出

列印頁面