UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载百分比堆叠条形图Percent Stacked Bar是堆叠条形图的重要变体它在保留“大类目下细分类目分段展示”这一结构的同时将每个条形的总高度归一化为 100%从而让读者可以直观比较不同大类目之间的构成比例。本文以 Ant Design Blazor 官方文档站点site/AntDesign.Docs/Demos/Charts/Bar中的演示为骨架完整讲解该图表的原理、Bar组件的配置方式、源码实现与实战要点读完即可在 Blazor 项目中独立落地一张百分比堆叠条形图。一、什么是百分比堆叠条形图原文档定义在堆叠条形图的基础之上大类目下各细分目的占比进行归一化就形成了百分比堆叠条形图。要理解百分比堆叠条形图需要先回顾它的两个“前身”基础条形图Bar横向柱状图适合分类文本较多、需要横向排布的场景参考 bar.md。堆叠条形图Stacked Bar将每个条形按细分类目分割成多段同时展示大类目之间的总量比较、大类目内部的构成占比以及不同大类目下同一细分类目的横向对比参考 stacked-bar.md。堆叠条形图的一个天然缺点是当分段过多时数据难以区分对比且不同分类下相同维度的数据不是按照同一基准线对齐的很难直接比较。百分比堆叠条形图正是为解决“占比比较”而生它不再以各分段的绝对值堆叠而是把每一个大类目条形的总长度统一缩放为 100%各细分目以百分比形式分段铺满整个条形。这样所有条形拥有完全相同的总长度读者可以一眼看出每个大类目中各细分类目的相对构成例如“Asia 在 1750 年人口占全球的百分之多少”。它与普通堆叠条形图的分工可以概括为图表类型关注点典型场景堆叠条形图总量 分段绝对值各区域销售总额及公司/消费者细分销售额百分比堆叠条形图分段占比归一化各大洲历年人口占比、各渠道流量占比二、仓库中的完整示例世界人口构成Ant Design Blazor 官方文档在 PercentStackedBar_.razor 中提供了完整的百分比堆叠条形图示例数据描绘了 1750—2050 年间亚洲Asia、非洲Africa、欧洲Europe三大洲的人口数量变化。下面逐段拆解这份可直接运行的演示代码。1. 组件声明与数据组织using AntDesign.Charts using Title AntDesign.Charts.Title Tabs TabPane Key1 TabTemplate示例1/TabTemplate ChildContent Bar Datadata1 Configconfig1/ /ChildContent /TabPane /Tabs关键点图表组件来自独立的 NuGet 包AntDesign.Charts文档站点在 AntDesign.Docs.csproj 中以0.5.5版本引用需要在文件顶部using AntDesign.Charts。由于AntDesign.Charts命名空间下同样存在Title类型演示代码通过using Title AntDesign.Charts.Title做了别名导入避免与 Blazor 组件中的其他Title冲突。百分比堆叠条形图复用的是同一个Bar组件通过Config中的字段组合来决定渲染形态——这正是 G2Plot 系列图表组件的通用设计一个组件 一份配置 一种图表。数据本体是object[]匿名对象数组每条记录包含三个字段country系列字段决定颜色分组、year大类目字段决定有多少根条形、value数值字段readonly object[] data1 { new { country Asia, year 1750, value 502 }, new { country Asia, year 1800, value 635 }, // ... 中间数据省略完整数据见 PercentStackedBar_.razor new { country Europe, year 2050, value 628 } };数据粒度决定了图表的聚合方式同一year如 “1750”下有多条country记录Asia 502、Africa 106、Europe 163SeriesField负责把这些记录合并为一根条形中的多个百分比分段。2. 核心配置BarConfigreadonly 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 } };这份配置是整篇文章的“灵魂”逐项说明如下配置项类型示例值作用TitleTitleVisible true, Text 百分比堆叠条形图图表主标题Visible控制是否显示Text为标题文案XFieldstringvalue数值字段名对应数据中的value决定条形长度百分比模式下参与归一化YFieldstringyear分类字段名对应数据中的year每取一个值就生成一根横向条形SeriesFieldstringcountry系列分组字段名对应数据中的country决定条形被切分为哪些百分比分段。它是从“堆叠条形图”切换到“百分比堆叠条形图”的关键开关Colorstring[][#2582a1, #f88c24, #c52125, #87f4d0]各系列分段的颜色数组按SeriesField的取值顺序依次取色LabelBarViewConfigLabelVisible true数据标签Visible为true时在每个分段上显示标签说明Color数组中给出了 4 个颜色而示例数据只有 3 个系列Asia、Africa、Europe多余颜色不会报错反过来若系列数多于颜色数多出的系列会循环使用颜色。若希望由底层库自动分配调色板可以省略Color配置。3. 为什么它能“归一化到 100%”从源码结构看BarConfig中并没有一个名为PercentStacked之类的布尔开关百分比堆叠形态完全由字段组合决定当同时设置XField、YField和SeriesField时图表库会把同一YField取值下的多个系列数据堆叠渲染并默认将每根条形的总和缩放到满宽100%各分段长度即为占比。这一点与仓库中StackedBar_.razorStackedBar_.razor的写法形成对照——后者同样设置SeriesField 细分但数据呈现的是绝对值堆叠。官方介绍Introduce 文档明确说明该图表库基于G2Plot开发所有渲染能力包括堆叠、归一化、坐标轴、图例等由 G2Plot 的 JavaScript 运行时提供Blazor 侧只负责把BarConfig序列化并传递给底层 JS。因此BarConfig中大部分可配置项与 G2Plot 的 Bar 图配置一一对应。三、把示例跑起来安装与最小可运行工程1. 添加 NuGet 包在 Blazor 项目根目录执行$ dotnet add package AntDesign.Charts2. 引入静态资源图表底层依赖 G2Plot 的 JS 文件需要在宿主页面中引入WebAssembly 项目为wwwroot/index.htmlServer 项目为Pages/_Host.razorscript src_content/AntDesign.Charts/g2plot.min.js/script script src_content/AntDesign.Charts/ant-design-charts-blazor.js/script3. 注册命名空间在_Imports.razor中加入using AntDesign.Charts4. 在组件中使用完成以上三步后把第二节的data1与config1放入任意.razor文件的code块并在模板中声明Bar Datadata1 Configconfig1/即可渲染出百分比堆叠条形图。官方示例Introduce 文档还演示了Line组件的同样用法Bar组件遵循完全一致的模式Data传入数据源、Config传入强类型的配置对象。四、横向对比Bar 家族的四种形态Ant Design Blazor 文档在 Bar 目录 下收录了四种条形图演示理解它们的配置差异有助于在实际项目中快速选择形态关键配置差异点参考文件基础条形图XFieldYField仅一根条形代表一个分类无分组Bar_.razor分组条形图XFieldYFieldSeriesFieldIsGroup true同一分类下多个系列并排而非堆叠GroupedBar_.razor堆叠条形图XFieldYFieldSeriesField多个系列按绝对值堆叠成一根条形StackedBar_.razor百分比堆叠条形图XFieldYFieldSeriesField归一化每根条形总长固定为 100%分段表示占比PercentStackedBar_.razor可以看到百分比堆叠条形图与堆叠条形图在代码层面几乎“同构”区别只在于统计口径绝对值 vs 占比而分组条形图则需要额外设置IsGroup true来切换并排模式。这种“一份配置切换图表形态”的设计让同一批数据在不同视角之间切换的成本极低。五、配置进阶Label 与样式的实战细节1. 标签位置与自动隐藏在堆叠/百分比堆叠场景中BarViewConfigLabel还支持更多细分项。参考 StackedBar_.razor 的第二个示例Label new BarViewConfigLabel { Offset 0, Visible true, Position middle }Position标签摆放位置可选值包括left/middle/right参考 Bar_.razor 示例 3 的注释。对百分比堆叠条形图通常将标签置于分段middle。官方演示说明当Position middle显示在条形中间时如果对应分段的宽度不足以摆放标签标签会被自动隐藏避免文字互相遮挡。2. 标签颜色自适应基础条形图示例 3Bar_.razor展示了标签与柱体颜色的配合Label new BarViewConfigLabel { Visible true, Position middle, AdjustColor true }AdjustColor默认值为true位于柱形内部的 label 颜色会根据柱形颜色自动调整保证可读性。这一机制同样作用于堆叠/百分比堆叠条形图的分段标签。3. 描述信息与转化率标签除Title外BarConfig还支持Description图下方描述文字VisibleText与ConversionTag转化率标签ConversionTagOptions用于展示相邻条形之间的数值变化比例详见 Bar_.razor 示例 3、示例 4。这些能力与百分比堆叠条形图的BarConfig属于同一配置体系可组合使用。六、最佳实践与注意事项数据必须按“大类目 × 系列”展开百分比堆叠条形图的输入是长表tidy data——同一大类目YField取值下每一系列SeriesField取值各占一行缺一行就会导致该段缺失。系列数量不宜过多延续堆叠条形图的固有缺点分段太多会显著降低可读性若系列超过 56 个建议改用分组条形图或拆分为多张图。留意系列取值顺序与颜色映射Color数组按SeriesField取值的首次出现顺序映射若需要固定系列与颜色的对应关系应保证数据顺序稳定或显式设置调色板。百分比堆叠不适合比较总量由于每根条形都被归一化为 100%条形本身不再携带总量信息。若读者既需要看总量又需要看占比可考虑“堆叠条形图 数值标签”或双图组合。优先使用强类型配置BarConfig、Title、BarViewConfigLabel均为强类型 C# 对象字段名拼写错误会在编译期暴露优于手写 JSON 配置同时这些对象最终会被序列化传给 G2Plot因此字段命名需与数据字段完全一致如示例中的value、year、country。七、总结百分比堆叠条形图是 Ant Design Blazor 图表体系中处理“构成占比”问题的首选形态。本文从官方文档的概念定义出发结合 PercentStackedBar_.razor 的完整示例讲解了Bar组件在XField/YField/SeriesField三字段组合下如何渲染出归一化到 100% 的堆叠条形并横向对比了基础条形图、分组条形图与堆叠条形图的配置差异。核心要点可归纳为一句话给Bar同时配置数值字段、分类字段与系列字段就得到了百分比堆叠条形图再配合Title、Color、Label等配置项完成样式与可读性的打磨。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐CivitAI 的 dbRead/dbWrite 双客户端路由当服务层在运行时选择数据库客户端时测试 mock 如何正确拆分CivitAI 的 dbRead / dbWrite 双客户端路由当服务层在运行时选择数据库客户端时测试 mock 如何正确拆分 本文解析 CivitAI前端UI组件设计系统mcp-agent 实时流式输出完全指南用 generate_stream 打造逐字生成的 Agent 体验mcp agent 实时流式输出完全指南用 generate_stream 打造逐字生成的 Agent 体验 本指南基于 mcp agent 开源仓库的 do前端UI组件设计系统在 Xinference 中部署 m3e-small 文本嵌入模型规格、启动与调用实践在 Xinference 中部署 m3e small 文本嵌入模型规格、启动与调用实践 导读 m3e small 是内置在 Xinference 中的轻量级中前端UI组件设计系统上一篇pstack why 技能实战如何用 Datadog 遥测还原代码背后的“为什么”下一篇实战联邦学习深度解析分布式AI训练与Mistral 7B模型高效微调创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考