TShopping

標題: Chart.js 如何使用長方圖 [打印本頁]
作者: woff    時間: 2026-3-11 17:14
標題: Chart.js 如何使用長方圖
官方網站

入門
讓我們開始學習 Chart.js 吧！

按照逐步指南快速上手 Chart.js
從 npm 或 CDN安裝 Chart.js
將 Chart.js與打包器、載入器和前端框架集成
使用 Node.js 中的 Chart.js
或者，請參閱下面的範例或查看樣本。

建立圖表
在這個範例中，我們將為單一資料集建立一個長條圖，並將其渲染到 HTML 頁面上。請將以下程式碼片段新增到您的頁面中：
  1. <div>
  2.   <canvas id="myChart"></canvas>
  3. </div>

  5. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  7. <script>
  8.   const ctx = document.getElementById('myChart');

  10.   new Chart(ctx, {
  11.     type: 'bar',
  12.     data: {
  13.       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  14.       datasets: [{
  15.         label: '# of Votes',
  16.         data: [12, 19, 3, 5, 2, 3],
  17.         borderWidth: 1
  18.       }]
  19.     },
  20.     options: {
  21.       scales: {
  22.         y: {
  23.           beginAtZero: true
  24.         }
  25.       }
  26.     }
  27.   });
  28. </script>
複製代碼

   
你應該會得到類似這樣的圖表：
 (, 下載次數: 5)

讓我們來分析一下這段程式碼。

首先，我們需要在頁面上放置一個畫布。為了確保響應式設計，建議為圖表建立一個單獨的容器。

  1. <div>
  2.   <canvas id="myChart"></canvas>
  3. </div>
複製代碼

   
現在我們有了畫布，可以從 CDN 引入 Chart.js。
  1. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
複製代碼

   
最後，我們可以創建圖表了。我們新增一個腳本，該腳本取得myChartcanvas 元素並new Chart使用所需的配置進行實例化：bar圖表類型、標籤、資料點和選項。

  1. <script>
  2.   const ctx = document.getElementById('myChart');

  4.   new Chart(ctx, {
  5.     type: 'bar',
  6.     data: {
  7.       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  8.       datasets: [{
  9.         label: '# of Votes',
  10.         data: [12, 19, 3, 5, 2, 3],
  11.         borderWidth: 1
  12.       }]
  13.     },
  14.     options: {
  15.       scales: {
  16.         y: {
  17.           beginAtZero: true
  18.         }
  19.       }
  20.     }
  21.   });
  22. </script>
複製代碼

   
您可以在逐步指南中查看使用 Chart.js 的所有方法。



歡迎光臨 TShopping (https://www.tshopping.com.tw/) Powered by Discuz! X3.5