Chart.js 柱状图终极指南：堆叠、浮动与水平条形图一次搞懂

Chart.js 柱状图终极指南堆叠、浮动与水平条形图一次搞懂【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.jsChart.js 是一个基于 HTML5canvas标签的简单强大的 JavaScript 图表库其中柱状图Bar Chart是最常用的图表类型之一。这篇 Chart.js 柱状图指南将带你一次性搞懂堆叠柱状图、浮动柱状图和水平条形图三大核心玩法外加圆角、粗细、时间轴等实用配置帮助新手快速上手 Chart.js Bar Chart 开发。 上图就是最经典的 Chart.js 垂直柱状图每个类目一根柱子高度对应数值一眼看出Blue 票数最高。一、柱状图基础先分清垂直与水平Chart.js 中柱状图的类型声明为type: bar默认沿x 轴分类、y 轴取数值画出的就是垂直柱子。官方文档中完整介绍了柱状图的数据集属性docs/charts/bar.md。一键切换水平条形图只需把indexAxis设为y柱子立刻变横躺非常适合展示产品名称较长的类目。配置样例见 docs/samples/bar/horizontal.md。选项含义默认值indexAxis: x垂直柱状图默认xindexAxis: y水平条形图-stacked: truex/y 轴开启堆叠falseborderRadius柱顶圆角半径0barThickness固定柱子像素宽度自动二、堆叠柱状图多组数据叠着画适用场景展示一个整体由哪些部分构成比如各月份中三个产品线的销量贡献。开启方法非常简单——给 x 轴和 y 轴同时设置stacked: trueoptions: { scales: { x: { stacked: true }, y: { stacked: true } } }官方交互示例可参考 docs/samples/bar/stacked.md。进阶技巧分组堆叠Stacked Groups默认所有数据集叠在同一个栈里如果想让部分数据集独立成栈可以给它们设置相同的stack: 组名。例如把线上渠道和线下渠道分成两个并排的堆叠柱对比更清晰。样例见 docs/samples/bar/stacked-groups.md。另外borderSkipped: middle可以跳过堆叠柱内部的分隔边框让同一栈的柱子视觉上连成一体详见 docs/charts/bar.md 的 borderSkipped 一节。三、浮动柱状图柱子不必从 0 开始适用场景甘特图式的时间区间、起止区间对比如期初 30 → 期末 80。核心玩法把data写成[起始值, 结束值]的二维数组柱子就会悬浮在区间中间而不是从 0 长出来data: [[30, 80], [50, 20], [10, 90]]浮动柱也可以与堆叠、水平方向组合使用浮动堆叠柱、水平浮动条完整的交互 Demo 见 docs/samples/bar/floating.md。四、样式速调圆角、粗细与占比想让柱子更精致这几个参数最关键详细文档docs/charts/bar.mdborderRadius柱子圆角堆叠模式下默认只作用于栈顶/栈底柱圆角样例见 docs/samples/bar/border-radius.mdbarPercentage/categoryPercentage两个 0~1 的比例值共同决定柱子占类目宽度的比例想要柱子贴边就把两者都设为 1barThickness直接指定柱子像素宽度设置后会忽略上面两个百分比maxBarThickness限制柱子最大宽度防止数据少时柱子过于肥厚。 上图中categoryPercentage: 1且barPercentage: 1柱子之间没有间隙柱顶统一圆角是仪表盘里很常见的样式。五、时间轴柱状图按日期排列的柱子当横轴是日期时建议使用time 或 timeseries 轴Chart.js 会自动按时间间隔排布柱子并且柱子宽度随间隔自适应barThickness: flex模式下不等宽。✅ 上图展示了多个数据集在时间轴上的柱状图效果。如果想让柱子骑在刻度线上而不是落在网格之间可以调整offset与grid.offset选项效果参考下图时间轴的更多配置见 docs/axes/cartesian/time.md 与 docs/axes/cartesian/timeseries.md。六、去哪里看源码与更多示例内容路径柱状图核心控制器src/controllers/controller.bar.js柱子绘制元素src/elements/element.bar.js柱状图官方文档docs/charts/bar.md堆叠/浮动/水平示例docs/samples/bar/柱状图测试用例含各种配置 JSONtest/fixtures/controller.bar/七、新手速记清单 ✅垂直柱type: bar默认即可水平条indexAxis: y堆叠x、y 轴都加stacked: true用stack区分栈浮动data写成[start, end]美观borderRadiusmaxBarThickness组合出高级感。按照这份清单你已经覆盖了 Chart.js 柱状图 90% 的日常需求。剩下的细节如clip、inflateAmount、skipNull可以直接查阅 docs/charts/bar.md 的完整属性表祝你做出漂亮的图表【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考