如何使用 Chart.js 建立簡單的圖表
在數據驅動決策的時代，以人們可以理解的方式視覺化數據非常重要。圖表和圖形幫助我們輕鬆理解複雜的數據、趨勢和模式。
讓我們深入研究利用 Chart.js 建立基本圖形表示的過程，Chart.js 是一個廣泛用於視覺化描述資訊的受人尊敬的 JavaScript 函式庫。
Chart.js 是什麼?
Chart.js 是一個免費工具，可協助開發人員為 Web 應用程式製作互動式圖表。 HTML5 canvas 元素呈現圖表，允許它們在現代瀏覽器上運作。
Chart.js 的特點
其特點包括:
Chart.js 以其直覺的設計而聞名，它使開發人員能夠以最少的編碼工作創建高度互動且美觀的圖表。
該庫表現出高度的適應性，可以滿足折線圖、條形圖、餅圖、雷達圖等各種圖表類型，從而滿足廣泛的數據視覺化需求。
Chart.js 是一個高度通用的圖表庫，專門設計用於在一系列設備（包括桌面和行動平台）上提供最佳效能。這些圖表具有令人印象深刻的響應能力和適應性，確保它們能夠有效地滿足用戶的需求，無論他們喜歡的設備或螢幕尺寸如何。
人們可以透過利用一系列可自訂的參數來修改使用 Chart.js 建立的圖表的外觀和功能，而不是遵循標準配置設定。這使得開發人員可以客製化視覺化效果以滿足專案的獨特需求。
設定環境
您可以透過兩種方法來建立庫，其中任何一種都適合您的需求。
⭐ 使用 CDN 。只需將以下腳本標記包含在 HTML 文件的頭部即可。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
⭐ 使用套件管理器。如果您喜歡套件管理器，可以使用 npm（節點套件管理器）安裝 Chart.js:
npm install chart.js
或紗線:
yarn add chart.js
基本 HTML 結構
為了將圖形表示合併到 HTML 內容中，必須包含具有適當標記的 canvas 元素。用於此目的的基本配置由以下組件組成:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Welcome to My Data Representation</h1>
<canvas id="myChart" width="400" height="150"></canvas>
<script></script>
</body>
</html>
為了讓網頁充滿精緻感，請產生一個名為「style.css」的檔案。透過將隨後的 CSS 規則合併到該文件中，可以實現所需的外觀。
@import url("https://fonts.googleapis.com/css2?family=Tilt\+Neon&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Tilt Neon", sans-serif;
padding: 2rem 4rem;
}
h1 {
font-size: 3rem;
color: #333;
text-align: center;
padding: 3rem;
}
製作您的第一個圖表:長條圖範例
為了說明這個概念，讓我們使用長條圖，它特別適合比較不同類別的離散資訊。
⭐ 在 HTML 底部的腳本標記中，首先使用其 id 屬性選擇 canvas 元素:
let canvas = document.getElementById('myChart');
⭐ 接下來，取得如何渲染圖表的上下文。在本例中，它是 2D 繪圖上下文。
let ctx = canvas.getContext('2d');
⭐ 接下來，使用 Chart() 函數在畫布上初始化一個新圖表。此函數將畫布上下文作為第一個參數，然後是一個包含要在圖表中顯示的資料的選項物件。
let options = {};
let myChart = new Chart(canvas, options);
⭐ 接下來，填入選項物件以指定圖表類型、資料以及圖表中所需的標籤。
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
}],
},
};
目前，您的圖表如下所示:
設計和客製化圖表
Chart.js 為個人化圖表提供了廣泛的可能性，包括但不限於:
使用 Chart.js 自訂圖表顏色來增強您的視覺體驗。您不僅可以個性化條形背景，還可以個性化線條邊框，以創建獨特且具有視覺吸引力的資料表示形式。
圖例可以放置在不同位置，以增強圖表資料的可讀性和理解。透過將其放置在頂部、底部、左側或右側，使用者可以輕鬆識別視覺表示中的模式和趨勢。
利用工具提示在滑鼠懸停時提供有關數據點的全面信息，從而更深入地了解所顯示的內容。
調整圖表的動畫屬性使用戶能夠自訂視覺呈現，透過客製化的過渡和持續時間設定來增強資料呈現的整體活力和互動性。
考慮以簡單的方式調整選項物件來修改資料集的配置。例如，一種可能的方法是更改選項對象，如下所示:
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
}],
},
};
您的圖表現在應如下所示:
最佳實務與效能提示
為了確保渲染圖表時的最佳效能:
為了優化 Chart.js 的效能，建議限制使用的資料點數量，以加快渲染速度並增強整體使用者體驗。
如果需要經常更新圖形或圖表，建議在產生新的視覺化之前使用「destroy()」函數消除任何先前渲染的表示。此方法有助於確保圖表中僅顯示最新且準確的數據。
避免常見陷阱的技巧
以下是一些需要避免的陷阱:
確保您的資訊始終遵循統一的結構，以避免潛在的不一致或不可預見的複雜情況。
為了優化效能，建議限制動畫的使用，因為過度使用可能會導致不良後果，儘管它們有可能提高使用者滿意度。
Chart.js:增強 Web 資料視覺化能力
利用 Chart.js 可以創建具有視覺吸引力和互動式的資料表示形式，有助於闡明相關見解並在知情的情況下形成結論。
Chart.js 提供了一種以視覺方式表示資訊的有效方法，無論一個人的程式設計熟練程度如何。