Chart.js 如何使用長方圖

woff

官方網站

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

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

建立圖表
在這個範例中，我們將為單一資料集建立一個長條圖，並將其渲染到 HTML 頁面上。請將以下程式碼片段新增到您的頁面中：

1. <div>
   
2.   <canvas id="myChart"></canvas>
   
3. </div>
   
4. 
   
5. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   
6. 
   
7. <script>
   
8.   const ctx = document.getElementById('myChart');
   
9. 
   
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>

複製代碼

   
你應該會得到類似這樣的圖表：

Chart 長方圖 jquery

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

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

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');
   
3. 
   
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 的所有方法。