前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载Ant Design Blazor 图表Charts体系中的条形图Bar组件以横向条形的方式呈现分类数据的数值大小是数据分析类 Blazor 应用中最高频的可视化组件之一。本篇指南以仓库文档 site/AntDesign.Docs/Demos/Charts/Bar/demo/bar.md 为核心结合同目录下 5 个可运行的 Demo 源码Bar_.razor、GroupedBar_.razor、StackedBar_.razor、PercentStackedBar_.razor、RangeBar_.razor系统讲解BarConfig的完整配置项、数据绑定方式以及分组条形图、堆叠条形图、百分比堆叠条形图和区间条形图四种扩展形态的选型与实战配置读完即可在项目中落地生产可用的条形图。条形图是什么为什么分类较多时优先选它条形图Bar Chart即横向柱状图。官方文档对它的定位非常明确条形图即是横向柱状图相比基础柱状图条形图的分类文本可以横向排布因此适合用于分类较多的场景。这句描述点出了条形图区别于柱状图Column的核心优势当分类维度如地区、商品、业务线数量较多时纵向柱状图的分类标签会变得拥挤、倾斜甚至互相遮挡而条形图将数值轴置于水平方向、分类轴置于垂直方向分类文本在垂直方向自然排布可读性显著提升。在 Ant Design Blazor 中条形图由Bar组件承载使用时需要引入AntDesign.Charts命名空间。一个最简单的使用形式如下摘自 Bar_.razorusing AntDesign.Charts Bar Datadata1 Configconfig1 /Bar组件只接收两个参数Data用于传入图表数据源Config用于传入类型为BarConfig的配置对象。数据与配置分离配置以强类型 C# 对象表达无需手写 JSON 或 JS 配置这是 Blazor 图表与前端组件库最大的使用差异。快速上手一个基础条形图的完整代码基础条形图 demoBar_.razor 中的示例 1给出了最小可运行的完整代码包含数据与配置两部分Bar Datadata1 Configconfig1 / code { readonly object[] data1 { new {地区 华东, 销售额 4684506.442}, new {地区 中南, 销售额 4137415.0929999948}, new {地区 东北, 销售额 2681567.469000001}, new {地区 华北, 销售额 2447301.017000004}, new {地区 西南, 销售额 1303124.508000002}, new {地区 西北, 销售额 815039.5959999998} }; readonly BarConfig config1 new BarConfig { Title new Title { Visible true, Text 基础条形图 }, ForceFit true, XField 销售额, YField 地区, Label new BarViewConfigLabel { Visible true } }; }这段代码揭示了条形图的三层结构数据层object[]数组每个元素是匿名对象字段名即图表字段名。示例中地区是分类字段、销售额是数值字段字段映射层XField指定数值字段名X 轴水平方向YField指定分类字段名Y 轴垂直方向。注意在条形图中X 轴承载的是数值这与柱状图正好相反表现层Title设置标题Visible控制是否显示、Text设置文本ForceFit让图表宽度自适应容器Label控制数值标签的显隐。需要特别说明的是Demo 中的中文匿名属性名地区、销售额是合法的 C# 标识符实际项目中推荐使用英文属性名如new { area 华东, sales 4684506.442 }随后在XField/YField中填写对应英文名称即可。BarConfig 核心配置项详解以下配置项全部来自 Bar 系列 Demo 源码中实际出现的BarConfig属性配合对应 demo 文件可逐一验证配置项类型/取值作用出处示例TitleTitle对象图表标题Visible控制显隐Text设置文本Bar_.razorDescriptionDescription对象图表描述/副标题用于解释图表数据口径或特性Bar_.razorForceFitbool是否强制图表宽度自适应父容器Bar_.razorXFieldstring数值字段名X 轴水平方向Bar_.razorYFieldstring分类字段名Y 轴垂直方向Bar_.razorColorFieldstring按字段区分条形的颜色Bar_.razorColorstring[]自定义配色序列支持十六进制色值与渐变色Bar_.razorSeriesFieldstring分组/堆叠的系列字段名与IsGroup或堆叠模式搭配GroupedBar_.razorIsGroupbool是否按SeriesField分组并列展示分组条形图GroupedBar_.razorIsRangebool是否为区间模式区间条形图X 字段为最小/最大数组RangeBar_.razorLabelBarViewConfigLabel数值标签配置含Visible、Position、Offset、AdjustColor、Layout等各 Demo 均有使用ConversionTagConversionTagOptions转化率标签在相邻条形之间标注数据变化比例Bar_.razorLabel 标签的精细控制Label的类型为BarViewConfigLabel基础条形图 demo 中展示了它的三种用法1. 仅显示标签示例 1标签默认位于条形端点处Label new BarViewConfigLabel { Visible true }2. 指定标签位置示例 2Position取值包括left/middle/rightLabel new BarViewConfigLabel { Visible true, Position middle }middle表示标签显示在条形内部正中位置常用于强调具体数值的图表。3. 标签颜色自适应示例 3位于条形内部的标签其文字颜色会根据所在条形颜色自动调整以保持可读性Label new BarViewConfigLabel { Visible true, Position middle, // options left / middle / right AdjustColor true }示例 3 对应的Description文本明确指出adjustColor配置项默认即为true位于条形内部的 label 颜色会跟随条形颜色自动调整。这意味着即使你对某一根条形指定了很深的配色标签依然清晰可读无需手动维护标签颜色。示例 3 同时展示了按字段区分颜色的用法——ColorField year配合Color配色数组ColorField year, Color new[] {#55A6F3, #CED4DE, #55A6F3, #55A6F3, #55A6F3}从该示例可以推断Color数组按数据行顺序对每条条形逐一着色数组长度可小于数据行数未覆盖的行可复用序列常用于突出某一特殊分类示例中将 1952 年 置为灰色以作区分。ConversionTag 转化率标签示例 4 展示了业务分析场景中非常实用的转化率标签功能适合用户希望关注从上到下数据变化比例的场景如电商漏斗在相邻条形之间绘制转化箭头并标注比例XField pv, YField action, ConversionTag new ConversionTagOptions { Visible true }示例 4 的数据是一组典型的漏斗数据——从浏览网站到完成交易的逐级 PV 递减序列50000 → 35000 → 25000 → 15000 → 8500。开启ConversionTag后相邻两级之间会显示转化率让每级流失多少一目了然无需自行计算。四种扩展形态选型与配置除基础条形图外仓库在 Bar/demo 目录下还提供了分组、堆叠、百分比堆叠、区间四种扩展形态均有独立的文档说明与可运行 Demo。它们与基础条形图共用Bar组件仅通过BarConfig中的不同配置项组合实现。分组条形图Grouped Bar同一分类下的多维度横向对比文档grouped-bar.md对分组条形图的定义是基础条形图的扩展形式适合在同一个轴上展示不同维度下相同分类的数据相比于堆叠条形图它更适合进行不同维度下同一分类的横向数值比较缺点是无法直观看到各维度总和的对比。分组条形图与堆叠条形图是一对矛盾关系——一方的缺点恰恰是另一方的优点需要根据具体场景二选一。对应的 GroupedBar_.razor 通过三个配置项组合实现分组readonly BarConfig config1 new BarConfig { Title new Title { Visible true, Text 分组条形图 }, XField value, YField label, IsGroup true, SeriesField type, Color new[] {#1383ab, #c52125}, Label new BarViewConfigLabel() };关键点IsGroup true是开启分组模式的开关SeriesField指定分组依据字段示例数据中每个分类Mon.、Tues.…对应type series1/series2两行数据同一分类的两根条形并列呈现Color数组按系列series着色示例中两组系列分别使用#1383ab与#c52125与基础条形图按数据行着色的机制不同。堆叠条形图Stacked Bar大类目下的细分构成文档stacked-bar.md说明堆叠条形图将每个条形进行分割以显示大类目下的细分类目占比情况可同时展示三类信息——大类目之间的数值比较、大类目下各细分类目的占比、不同大类目下同一细分类目的横向数值比较。其缺点同样被明确记录堆叠过多时数据难以区分对比且不同分类下相同维度的数据并非按同一基准线对齐难以直接对比。堆叠模式不需要IsGroup开关只需设置SeriesField即可见 StackedBar_.razor 的示例 2readonly BarConfig config2 new BarConfig { ForceFit true, Title new Title { Visible true, Text 堆叠条形图label自动隐藏 }, Description new Description { Visible true, Text 在堆叠条形图中如果label的位置被设定为middle即显示在条形中间。在对应形状大小不够摆放label的情况下label会被自动隐藏。 }, YField 地区, XField 销售额, SeriesField 细分, Label new BarViewConfigLabel { Offset 0, Visible true, Position middle } };这个示例额外演示了一个值得注意的细节在堆叠条形图中当Label.Position middle时如果某个堆叠分段的空间不足以容纳标签该标签会被自动隐藏避免文字重叠与互相挤压。这解释了堆叠图中配置Offset 0与Position middle的配合意义——标签紧贴各分段中心放得下就显示、放不下就让位是生产环境推荐的开箱即用行为。百分比堆叠条形图Percent Stacked Bar归一化的构成占比文档percent-stacked-bar.md的说明非常简短但要点明确在堆叠条形图的基础之上将大类目下各细分目的占比进行归一化就形成了百分比堆叠条形图。也就是说百分比堆叠条形图在堆叠模式下自动将每个条形拉伸至等长100% 宽度各分段的长度直接表达占比。配置上同样只需SeriesField即可见 PercentStackedBar_.razorreadonly BarConfig config1 new BarConfig { Title new Title { Visible true, Text 百分比堆叠条形图 }, XField value, YField year, SeriesField country, Color new[] {#2582a1, #f88c24, #c52125, #87f4d0}, Label new BarViewConfigLabel { Visible true } };该示例数据为各大洲Asia、Africa、Europe…跨越 1750 至 2050 年的人口数据。与堆叠条形图使用完全相同的数据结构一条数据 一个分类 一个系列 一个数值组件自动完成归一化无需在数据层预先计算百分比。区间条形图Range Bar数值范围的横向可视化区间条形图range-bar.md用于展示每个分类对应的数值区间如价格区间、时间范围、误差范围。它的数据结构与前面所有形态都不同——X 字段的值是一个[最小值, 最大值]数组见 RangeBar_.razorreadonly object[] data1 { new {type 分类一, values new[] {76, 100}}, new {type 分类二, values new[] {56, 108}}, new {type 分类三, values new[] {38, 129}}, // ... }; readonly BarConfig config1 new BarConfig { Title new Title { Visible true, Text 区间条形图 }, XField values, YField type };注意这里XField values指向的是一个整型数组字段每个分类渲染为一根横跨[min, max]的条形。IsRange在示例 1 中未显式声明可以推断区间模式由数据结构自动识别而示例 2 则显式开启IsRange true并演示了区间条形图的样式定制readonly BarConfig config2 new BarConfig { Title new Title { Visible true, Text 为区间条形图配置label样式 }, Description new Description { Visible true, Text 使用style配置项配置label整体样式同时支持通过leftStyle和rightStyle分别配置label样式。 }, XField values, YField type, Color new[] {l(0) 0:#3e5bdb 1:#dd3121}, IsRange true, Label new BarViewConfigLabel() { Position middle, Layout new [] { new LayoutType() { Type adjust-color } } } // ColumnStyle new { FillOpacity 0.8 }, // Label new BarViewConfigLabel // { // Visible true, // LeftStyle new { Fill #3e5bdb }, // RightStyle new { Fill #dd3121 } // } };示例 2 展示了两个要点渐变色条形Color支持 G2 语法渐变色l(0) 0:#3e5bdb 1:#dd3121表示从蓝色到红色的线性渐变让区间两端最小值与最大值在视觉上有明确的方向感标签布局插件Label.Layout接收LayoutType数组示例中注册了adjust-color布局用于调整标签颜色与背景的对比度。此外示例中注释掉的代码透露了区间条形图还支持ColumnStyle整条统一样式如FillOpacity以及LeftStyle/RightStyle分别定制区间左右端标签样式等配置能力需要更细粒度定制时可以参照启用。工程背景图表能力的来源与查阅方式需要说明的是Bar 系列图表组件含Bar、BarConfig、BarViewConfigLabel、ConversionTagOptions等类型由独立 NuGet 包AntDesign.Charts提供而非封装在components/目录下。仓库文档站项目通过包引用引入该能力见 site/AntDesign.Docs/AntDesign.Docs.csprojPackageReference IncludeAntDesign.Charts Version0.5.5 /对使用者而言在自己的 Blazor 项目中添加同版本的AntDesign.Charts包引用即可获得本文所述的全部条形图能力。仓库内可直接查阅的学习资源包括Bar 系列全部文档site/AntDesign.Docs/Demos/Charts/Bar/doc/index.zh-CN.md组件总览与何时使用Bar 系列全部 Demosite/AntDesign.Docs/Demos/Charts/Bar/demo 目录下的 5 份.md文档与 5 份.razor源码是一份文档 ↔ 代码一一对应的完整实例集演示数据源ChartsDemoData.cs 提供了其他图表 Demo 的公共数据可与 Bar 系列配合理解图表数据组织方式图表通用能力GeneralConfiguration目录下的 axis.md、legend.md、interop.md 等文档讲解了坐标轴、图例、数据更新等可应用到条形图上的通用配置。总结五种条形图形态的选型速查形态核心配置推荐场景局限性基础条形图XFieldYFieldLabel分类较多时的单维度数值对比无法呈现维度构成分组条形图IsGroup trueSeriesFieldColor同一分类下多系列并列对比看不到系列总和对比堆叠条形图SeriesField堆叠大类目数值 细分构成同时呈现堆叠过多难区分、不同分类下同维度难对比百分比堆叠条形图SeriesField自动归一化关注各分类内的构成占比失去绝对数值信息区间条形图XField为[min, max]数组 IsRange数值范围、误差区间可视化数据结构需特殊组织从基础条形图的XField/YField字段映射到分组图的IsGroup开关、堆叠系列的SeriesField、区间图的数组型数值字段再到Label的位置与自适应配色、ConversionTag的转化率标注Bar组件用一套强类型的BarConfig覆盖了条形图家族的全部主流形态。开发者在选择形态时只需对照上表确认要对比什么、要不要看构成、要不要看占比三个问题即可快速确定配置组合直接复用仓库 Demo 中的代码骨架完成落地。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐Builder.io 可视化开发完全教程3 步把拖拽式可视化编辑器接入 React/Vue 项目Builder.io 可视化开发完全教程3 步把拖拽式可视化编辑器接入 React/Vue 项目 Builder.io 是一个面向现代前端的可视化开发平台工UI组件前端Ant Design Blazor 图表系列百分比堆叠条形图Percent Stacked Bar实战指南Ant Design Blazor 图表系列百分比堆叠条形图Percent Stacked Bar实战指南 百分比堆叠条形图Percent StackeUI组件前端Ant Design Blazor 分组条形图Grouped Bar实战指南IsGroup 配置解析与堆叠图的选型取舍Ant Design Blazor 分组条形图Grouped Bar实战指南IsGroup 配置解析与堆叠图的选型取舍 分组条形图Grouped Bar前端UI组件设计系统上一篇PHPMailer企业应用大型系统集成案例下一篇KernelSU模块安装失败问题分析与解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考