Chart.js - 基礎

為了理解 chart.js 的基礎知識，讓我們一步一步來，看看如何使用 chart.js 庫建立一個簡單的柱狀圖 -

步驟 1 − 首先，我們需要使用 canvas 物件建立一個 canvas id。我們可以在此新增各種樣式和 HTML 元素。我們還需要提供圖形或圖表的高度和寬度。讓我們看看如何建立它 −

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

步驟 2 − 現在，我們需要訪問 canvas 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>

輸出

列印頁面