数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载导读本文聚焦 AntV F2 移动端图表库中的堆叠柱状图Stack Bar Chart讲解如何通过Interval几何标记的adjuststack配置把多个数据系列堆叠为单根柱子以直观呈现部分对整体的构成关系与累积总量。文章以 site/examples/bar/stack/index.en.md 为主题骨架完整继承其基础示例与百分比堆叠进阶用法并结合仓库源码剖析堆叠调整stack adjust的底层算法、数据字段映射与执行链路帮助读者不仅会用还能理解其实现原理。一、什么是堆叠柱状图堆叠柱状图是柱状图bar chart的一种变形多个数据系列共享同一根柱子按顺序纵向堆叠每个分段的高度代表该系列在当前类别下的数值整根柱子的高度即所有系列的累计总量。它特别适合展示各个部分对整体的贡献度数据的构成关系不同类别间的总量比较及其内部构成差异跨时间/跨类别的累积效果与变化趋势。在 F2 的语法体系中柱状图与条形图均由Interval区间几何标记绘制配合直角坐标系coord的transposed: true可以横向翻转即条形图形态bar未翻转时即柱状图column形态。堆叠则通过adjuststack让多个分组系列纵向累加。二、基础示例堆叠柱状图F2 的示例仓库在 site/examples/bar/stack/ 下提供了完整的堆叠条形图 demostack.jsx以 London 与 Berlin 两座城市逐月降雨量数据为例展示多数据系列的堆叠累积效果/** jsx jsx */ import { jsx, Canvas, Chart, Interval, Axis } from antv/f2; const data [ { name: London, 月份: Jan., 月均降雨量: 18.9 }, { name: London, 月份: Feb., 月均降雨量: 28.8 }, // ... 更多数据 { name: Berlin, 月份: Jul., 月均降雨量: 37.4 }, { name: Berlin, 月份: Aug., 月均降雨量: 42.4 }, ]; const context document.getElementById(container).getContext(2d); const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} coord{{ transposed: true, }} scale{{ 月均降雨量: { tickCount: 5, }, }} Axis field月份 / Axis field月均降雨量 / Interval x月份 y月均降雨量 colorname adjuststack / /Chart /Canvas ); const chart new Canvas(props); chart.render();关键配置解读配置项取值作用coord.transposedtrue将直角坐标系转置柱状图翻转为横向条形图stack barChart.scale{ 月均降雨量: { tickCount: 5 } }为数值轴指定刻度数量控制坐标轴密度Interval.x月份分类轴字段决定每根柱子的位置Interval.y月均降雨量数值字段决定堆叠分段的高度Interval.colorname分组/系列字段不同系列渲染为不同颜色分段Interval.adjuststack核心开启堆叠调整多个系列纵向累加极简写法在不关心坐标转置与刻度细节时堆叠柱状图的核心声明可以极简为源自 index.zh.md 中的基础示例Chart data{data} Axis fieldState / Axis field人口数量 / Interval xState y人口数量 color年龄段 adjuststack / /Chartadjust属性同时支持字符串简写与对象完整写法两种形式字符串stack等价于对象{ type: stack }见 geometry/index.tsx 中_createAdjust对typeof adjust string的分支处理。三、进阶用法百分比堆叠柱状图percent.jsx 提供了百分比堆叠的进阶示例以欧洲/亚洲各年份人口占比数据展示各部分在整体中的占比关系。核心差异在于数据中直接携带了percent字段取值 0~1并将其作为y字段const data [ { country: Europe, year: 1750, value: 163, percent: 0.24511278195488723 }, { country: Asia, year: 1750, value: 502, percent: 0.7548872180451128 }, // ... ]; const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} coord{{ transposed: true }} scale{{ percent: { min: 0, }, }} Axis fieldyear / Axis fieldpercent / Interval xyear ypercent colorcountry adjuststack / /Chart /Canvas );百分比堆叠的关键点数据预处理在原数据中预先计算好各部分占比如value / 该类别总计或将原始数值字段在 scale 层归一化scale.percent.min 0强制百分比轴从 0 开始保证堆叠基线对齐避免出现负值或非零起点导致的视觉错位y字段使用占比堆叠后的每一根柱子顶端恰好归一化到 1即 100%各分段高度直接反映占比大小当adjuststack时F2 会对 y 字段的度量范围做堆叠适配详见下文第四节堆叠与度量范围因此这类构成型数据无需额外设置max整根柱即可自动延伸至 100%。百分比堆叠适合在需要强调结构占比而非绝对值总量的场景中使用例如人口结构、市场份额、收入构成等。四、源码级原理堆叠调整的执行链路1. adjust 属性如何被解析Interval最终继承自Geometry几何标记基类见 components/geometry/index.tsx。在_createAdjust()方法中字符串形式的adjust会被规范化为配置对象然后通过AdjustMapStack/Dodge/Jitter/Symmetric找到对应的调整构造函数实例化const AdjustMap { Stack: Stack, Dodge: Dodge, Jitter: Jitter, Symmetric: Symmetric, }; const adjustCfg: AdjustProps typeof adjust string ? { type: adjust } : adjust; const adjustType upperFirst(adjustCfg.type); // stack - Stack const AdjustConstructor AdjustMap[adjustType]; // - Stack 类 if (!AdjustConstructor) { throw new Error(not support such adjust : adjust); }随后框架会自动注入xField与yField——分别取自几何标记x、y两个属性对应的数据字段名源码见 geometry/index.tsx因此示例中x月份、y月均降雨量会被自动绑定为堆叠算法的分组维度和累加维度。AdjustType的类型定义明确了支持的全部调整类型stack | dodge | symmetric见 Adjust.d.ts堆叠对应StackAdjustProps。2. Stack 堆叠算法的核心逻辑堆叠算法的实现在 deps/f2-adjust/src/adjusts/stack.tsf2-adjust是 F2 内置的数据调整子库入口见 deps/f2-adjust/src/index.ts。其核心思路是按分组系列字段如color指定的name/country将数据切分成多个二维数组然后逐分组、逐类别地累计 y 值并把原始 y 改写为[起始值, 结束值]区间数组即该分段在柱子中的上下边界private processStack(groupDataArray: Data[][]): Data[][] { // positive / negative 两个缓存分别处理正数与负数堆叠 const positive new Cachenumber(); const negative new Cachenumber(); return groupedDataArray.map((dataArray) { return dataArray.map((data) { const x get(data, xField, 0); let y get(data, [yField]); const xKey x.toString(); y isArray(y) ? y[1] : y; // 兼容 y 已是区间的情况 if (!isNil(y)) { const cache y 0 ? positive : negative; if (!cache.has(xKey)) cache.set(xKey, 0); const xValue cache.get(xKey); const newXValue y xValue; cache.set(xKey, newXValue); return { ...data, [yField]: [xValue, newXValue], // 改写为堆叠区间的上下界 }; } return data; }); }); }这段实现可以提炼出三个关键设计正负分离positive与negative两个累加缓存分别记录正数系列与负数系列的累计值保证含负值的数据也能正确堆叠负数从零点向下堆叠正数向上堆叠区间改写每个数据点从单一标量y被改写为[yStart, yEnd]区间数组后续Interval绘制时依据该区间确定矩形的上下边界这正是堆叠逐段拼接的几何基础系列顺序默认按分组数据数组的原始顺序依次堆叠Stack同时支持reverseOrder配置构造函数默认false置true时会在process前后对分组数组做reverse()实现层叠顺序翻转。3. 堆叠与度量范围scale range的联动堆叠不仅改变数据形态还会反向影响 y 轴度量的取值范围。在 geometry/index.tsx 中几何标记初始化完成后会检查 adjust 类型if (adjust stack || (adjust as AdjustProps)?.type stack) { chart.scale._updateStackRange(y.scale, flatten(this.dataArray)); }即只要开启了stack框架就会基于堆叠后的数据flatten(this.dataArray)重新计算 y 轴度量的取值范围使坐标轴顶端对齐到所有系列累加后的总和而不是单个系列的最大值。这也解释了为什么基础示例中没有显式设置max柱子顶端也能正确抵达坐标轴上限——这是堆叠模式的自动行为。同时_updateStackRange与adjustPieScale饼图场景在堆叠判定处的并列出现见同段代码说明adjuststack在 polar极坐标/玫瑰图场景同样适用。4. 从调整到渲染堆叠调整发生在Geometry的数据预处理阶段原始数据先按color等分组属性拆分为系列_groupData再由Adjust实例的process处理为带区间y的记录。随后Interval.mapping()见 withInterval.tsx为每个记录调用coord.convertRect({ x, y, y0, size })将数据坐标转换为画布矩形——y0来自getY0Value()零点位置堆叠后的[yStart, yEnd]区间即决定了每个分段矩形在柱中的精确位置与高度。整条链路可以概括为Interval x y color adjuststack → Geometry._createAdjust() 解析 adjust 并注入 xField/yField → f2-adjust Stack.process() 按系列累加、改写 y 为区间 → chart.scale._updateStackRange() 重算 y 轴范围 → Interval.mapping() → coord.convertRect() 生成矩形 → 渲染堆叠分段五、更多示例与测试验证仓库中堆叠柱状图的相关实践还可以在以下位置找到测试用例packages/f2/test/components/interval/rect-stack.test.tsx矩形堆叠专项测试使用adjuststack与sizeRatio{1}、interval/example/column.test.tsx柱状堆叠与百分比堆叠的渲染测试、interval/example/bar.test.tsx条形堆叠测试。这些测试均以adjuststack断言快照渲染结果可作为配置正确性的参照组件文档site/docs/api/chart/interval.zh.md 中关于Interval属性与adjust的完整说明同类调整对比site/examples/bar/dodge/adjustdodge分组并列与 site/examples/bar/bar/普通柱状图可对照理解stack与dodge在数据形态上的差异——stack 纵向累加、dodge 横向错开。六、使用建议选型需要强调部分之和时用stack需要并列比较各系列独立大小时用dodge需要强调占比结构时优先百分比堆叠数据形态y字段可以是原始数值自动累加或预计算占比0~1后者配合scale.min: 0可保证基线正确顺序控制默认按color分组数据在数组中的出现顺序堆叠需要翻转层叠顺序时可传入对象形式的adjust{{ type: stack, reverseOrder: true }}含负值数据Stack 实现内置正负缓存分离负数系列会从零点向下堆叠无需额外处理坐标系coord.transposed: true得到横向条形图false默认为纵向柱状图堆叠逻辑两者通用极坐标下玫瑰图/多饼图同样支持 stack 调整。以上就是 F2 堆叠柱状图的完整实战指南——从一行adjuststack的声明式配置到f2-adjust中正负缓存累加、区间改写、度量范围重算的底层实现均可在 packages/f2/src 与 site/examples/bar/stack 目录中对照查阅与验证。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐Chart.js 堆叠柱状图Stacked Bar Chart完整实战指南从基础配置到源码级原理Chart.js 堆叠柱状图Stacked Bar Chart完整实战指南从基础配置到源码级原理 本文基于 Chart.js 仓库中的堆叠柱状图示例文档图表库前端数据可视化Chart.js 分组堆叠柱状图Stacked Bar Chart with Groups实战指南用 stack 属性划分多组堆叠Chart.js 分组堆叠柱状图Stacked Bar Chart with Groups实战指南用 stack 属性划分多组堆叠 分组堆叠柱状图是 Ch图表库前端数据可视化Chart.js 堆叠柱状图与折线图混合实战用 stack 与 stacked 实现 Stacked Bar/Line 组合图表Chart.js 堆叠柱状图与折线图混合实战用 stack 与 stacked 实现 Stacked Bar/Line 组合图表 导读 本指南围绕 Chart图表库前端数据可视化上一篇Biome 格式化器终极指南为什么比 Prettier 快 25 倍下一篇Bluebird vs 原生Promise终极性能对比与功能差异完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考