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 ([]) 的实战指南)
