Chart.js 柱形圖
先看效果：
代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>
</head>
<body><canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 設置 X 軸上對應的標簽
const data = {labels: labels,datasets: [{label: '我的第一個柱形圖',data: [65, 59, 80, 81, 56, 55, 40],backgroundColor: [ // 設置每個柱形圖的背景顏色'rgba(255, 99, 132, 0.2)','rgba(255, 159, 64, 0.2)','rgba(255, 205, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(54, 162, 235, 0.2)','rgba(153, 102, 255, 0.2)','rgba(201, 203, 207, 0.2)'],borderColor: [ //設置每個柱形圖邊框線條顏色'rgb(255, 99, 132)','rgb(255, 159, 64)','rgb(255, 205, 86)','rgb(75, 192, 192)','rgb(54, 162, 235)','rgb(153, 102, 255)','rgb(201, 203, 207)'],borderWidth: 1 // 設置線條寬度}]
};
const config = {type: 'bar', // 設置圖表類型data: data, // 設置數據集options: {scales: {y: {beginAtZero: true // 設置 y 軸從 0 開始}}},
};
const myChart = new Chart(ctx, config);
</script></body>
</html>柱形圖是一種以長方形的長度為變量的統計圖表。
柱形圖用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。
柱形圖的?type?屬性為?bar?，type 描述了圖表類型。
1.?引入 Chart.js 庫
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>-
通過 CDN 引入 Chart.js 庫（版本 3.7.1），無需本地安裝即可使用圖表功能。
2.?HTML 畫布容器
<canvas id="myChart" width="400" height="200"></canvas>-
<canvas>?是 HTML5 的繪圖元素，Chart.js 通過它動態渲染圖表。
3.?JavaScript 配置圖表
const ctx = document.getElementById('myChart'); // 獲取畫布上下文
const labels = ['一月份', '二月份', ...]; // X 軸標簽
const data = {labels: labels, // 綁定標簽datasets: [{label: '我的第一個柱形圖', // 數據集名稱data: [65, 59, 80, ...], // Y 軸數據backgroundColor: ['rgba(255,99,132,0.2)', ...], // 柱形背景色（半透明）borderColor: ['rgb(255,99,132)', ...], // 柱形邊框色borderWidth: 1 // 邊框寬度}]
};-
datasets：定義數據集的樣式和數據，支持多個數據集疊加（這里只有一個）。 -
顏色設置：
-
backgroundColor?使用 RGBA 格式（最后一個參數?0.2?表示透明度）。 -
borderColor?使用 RGB 格式（不透明）。
-
4.?圖表配置與渲染
const config = {type: 'bar', // 圖表類型（柱形圖）data: data, // 綁定數據options: {scales: {y: {beginAtZero: true // 強制 Y 軸從 0 開始}}}
};
const myChart = new Chart(ctx, config); // 創建圖表實例-
beginAtZero: true：確保 Y 軸刻度從 0 開始，避免誤導性數據展示。
效果說明
-
最終生成一個寬度 400px、高度 200px 的柱形圖，包含：
-
7 個彩色柱形（對應 7 個月份）。
-
鼠標懸停時會顯示具體數值。
-
自動適配的 Y 軸刻度（從 0 開始）。
-
擴展建議
-
動態數據：可通過 Ajax 從后端 API 加載數據，替換?
data?數組。 -
多數據集：在?
datasets?數組中添加多個對象，實現多組數據對比。 -
響應式設計：在?
options?中添加?responsive: true，使圖表自適應容器大小。
示例修改為多數據集：
datasets: [{ label: '2023年', data: [65, 59, 80, ...], ... },{ label: '2024年', data: [30, 45, 70, ...], ... }
]
![【GPT入門】第33 課 一文吃透 LangChain：chain 結合 with_fallbacks ([]) 的實戰指南](http://pic.xiahunao.cn/【GPT入門】第33 課 一文吃透 LangChain：chain 結合 with_fallbacks ([]) 的實戰指南)
