数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载导读Geometry几何标记是 F2 移动端图表库中负责「数据可视化映射」的核心组件层它将数据字段映射为具体的图形元素线、点、区间、面积等是所有图表类型Line、Interval、Point、Area、Candlestick共同继承的基类。本文以 site/docs/api/chart/geometry.zh.md 文档为骨架结合 Geometry 基类源码 与各子组件实现系统讲解几何标记的继承关系、统一属性、统一方法、数据映射管线与设计理念帮助你掌握 F2 图表组件的底层运行机制并能熟练运用统一 API 实现交互、样式与数据调整。一、概述什么是几何标记几何标记是 F2 图表中用于数据可视化的图形组件负责将数据映射为具体的图形元素。所有几何标记组件都继承自 Geometry 基类共享相同的属性命名、配置方式与公共逻辑。从源码层面看Geometry是一个泛型基类位于 packages/f2/src/components/geometry/index.tsx第 91-95 行class Geometry TRecord extends DataRecord DataRecord, P extends GeometryPropsTRecord GeometryPropsTRecord, S extends SelectionState SelectionState extends SelectionP ChartChildProps, S { isGeometry true; geomType: GeometryType; ... }它自身又继承自Selectionpackages/f2/src/components/geometry/selection.ts因此所有几何标记组件天然具备图形选中selection能力——包括单击选中、多选、默认选中、选中/未选中样式等。继承关系与子组件以下几何标记组件都继承自 Geometry共享相同的属性和方法组件说明详细文档Line折线图、曲线图、阶梯线图Line 组件文档Interval柱状图、直方图、饼图、环形图、漏斗图Interval 组件文档Point散点图、气泡图Point 组件文档Area面积图、层叠面积图Area 组件文档CandlestickK线图、股票图Candlestick 组件文档各个子组件在getDefaultCfg()中声明自己的geomType用于主题样式查找与图形类型区分例如Line 的默认配置geomType: line并设置sortable: true线图数据需要按 x 排序Interval 的默认配置geomType: interval、justContent: truex 轴居中且startOnZero: truey 轴默认从 0 开始Area 的默认配置geomType: area、startOnZero: true、sortable: trueCandlestick 的默认配置geomType: candlestick。而 Point 组件的实现最轻量packages/f2/src/components/point/withPoint.tsx直接继承 Geometry 的mapping()与render()管线。二、统一属性所有几何标记共享的基础配置所有几何标记组件都支持以下基础属性这些属性定义在GeometryProps接口中packages/f2/src/components/geometry/index.tsx#L68-L89属性类型说明xstringx 轴的数据映射字段名必填ystringy 轴的数据映射字段名必填colorstring \| [string, any[]] \| object颜色映射支持 5 种配置方式sizestring \| number \| [string, any[]] \| object大小映射支持 5 种配置方式shapestring \| [string, any[]] \| object图形形状映射animationobject \| false动画配置appear/update/leave 三阶段styleobject图形样式viewClipboolean是否只显示图表区域内两轴之间adjuststring \| object数据调整方式stack/dodge/symmetricstartOnZerobooleany 轴是否从 0 开始selectionobject图形选中配置继承自 Selection注意文档规定x与y是必填属性。源码中 AttrController.getAttrOptions 会显式校验if (!props.x || !props.y) throw new Error(x, y are required !)。以最典型的 Line 组件为例一个最小可用配置是import { Canvas, Chart, Line } from antv/f2; const data [ { genre: Sports, sold: 5 }, { genre: Strategy, sold: 10 }, { genre: Action, sold: 20 }, { genre: Shooter, sold: 20 }, { genre: Other, sold: 40 }, ]; Canvas context{context} Chart data{data} Line xgenre ysold / /Chart /Canvas;color 属性5 种配置方式以 Line 文档的 color 属性章节 为例color 的 5 种写法如下格式类型说明示例固定值string直接指定颜色值Line color#1890FF /字段映射string根据数据字段自动映射Line colorcategory /数组形式[string, string[]][字段, 颜色数组]Line color{[cat, [red, blue]]} /对象形式object详细配置field/range/callbackLine color{{ field: cat, range: [red, blue] }} /类型指定object指定映射类型Line color{{ type: linear, field: val }} /对象格式的属性属性类型必填默认值描述fieldstring是-映射的数据字段名rangestring[]否-颜色范围数组callback(value, record?) string否-自定义颜色函数。value 为field 指定字段在数据中的值record 为完整数据对象类型格式的属性type: linear | categorylinear线性渐变映射颜色沿数值渐变category分类映射颜色离散分配。从源码看Category attr 的 _mapping 实现 对cat类型 scale 通过scale.translate(value)取索引后按range[index % range.length]取色对数值型则先归一化再Math.round(normalizeValue * (range.length - 1))取色而 AttrController.parseOption 负责把字符串、数字、数组、对象这几种写法统一解析为{ field, range, type }选项结构再交由对应的 Attr 类实例化。size 属性5 种配置方式size 与 color 结构对称格式类型说明示例固定值number直接指定大小Line size{4} /字段映射string根据数据字段自动映射Line sizevalue /数组形式[string, number[]][字段, 大小数组]Line size{[val, [2, 4, 6]]} /对象形式object详细配置Line size{{ field: val, range: [2, 10] }} /类型指定object指定映射类型Line size{{ type: linear, field: val }} /需要说明的是当 size 为纯数字时AttrController.parseOption 会将其解析为identity类型即恒定值所有图形使用同一大小。style 属性图形样式style 直接透传给图形渲染。以 Line 组件为例常用样式属性包括属性名类型默认值描述strokestring-描边颜色lineWidthnumber1线条宽度像素strokeOpacitynumber1描边透明度范围 0-1lineCapbutt \| round \| squarebutt线条端点样式lineJoinbevel \| round \| mitermiter线条连接样式lineDashnumber[]-虚线样式如[5, 5]lineDashOffsetnumber0虚线偏移量miterLimitnumber10斜接面限制比例opacitynumber1整体透明度shadowColor / shadowBlurstring/number- /0阴影颜色与模糊程度cursorstring-鼠标样式样式使用示例取自 Line 文档// 圆角端点 圆角连接 Line xgenre ysold style{{ stroke: #1890FF, lineWidth: 4, lineCap: round, lineJoin: round }} /// 虚线样式 Line xgenre ysold style{{ stroke: #1890FF, lineDash: [5, 5], // 5px 实线, 5px 空白 lineDashOffset: 0 }} /style 也支持函数式写法在源码 Geometry._getShapeStyle 中如果style里某个属性值是函数会以attr(value)value 为field指定字段的值未指定 field 时为整个 origin 记录调用将返回值写入最终样式。style 的解析顺序为主题默认样式 → 主题 shape 样式 → 用户 style。animation 属性三阶段动画动画配置按appear元素进场/ update数据更新/ leave元素离场三个阶段划分三个阶段支持完全相同的属性结构阶段属性类型必填默认值描述appear/update/leaveeasingstring \| function否linear缓动函数durationnumber否300动画时长 (ms)delaynumber否0延迟时间 (ms)propertystring[]否-变化的属性数组如[x, y]startobject否-起始状态endobject否-结束状态动画状态对象start/end支持fillOpacity、opacity、x、y、stroke、lineWidth等属性。缓动函数可选值linear线性、ease-in/in加速、ease-out/out减速、ease-in-out/in-out先加速后减速、ease-out-in/out-in先减速后加速。配置示例// 自定义进场动画淡入效果 Line xgenre ysold animation{{ appear: { easing: ease-out, duration: 1000, property: [opacity], start: { opacity: 0 }, end: { opacity: 1 } } }} /// 配置多个动画阶段 Line xgenre ysold animation{{ appear: { easing: ease-out, duration: 800, property: [opacity], start: { opacity: 0 }, end: { opacity: 1 } }, update: { easing: linear, duration: 450, property: [x, y] }, leave: { easing: ease-in, duration: 500, property: [opacity], end: { opacity: 0 } } }} /// 禁用动画 Line xgenre ysold animation{false} /各组件拥有自己的默认动画如 Line 默认使用从左到右擦除效果{ appear: { easing: quadraticOut, duration: 450 }, update: { easing: linear, duration: 450 } }用户配置会与之合并。adjust 属性数据调整方式adjust支持字符串或对象两种写法可选值定义在 Adjust.d.ts值描述stack层叠将同一个分类的数据值累加起来dodge分组散开将同一个分类的数据进行分组均匀分布symmetric数据对称使生成的图形居中对齐对象写法可以携带附加参数例如 Dodge 支持marginRatio组间距与dodgeRatio组内间距Stack 支持reverseOrder层叠顺序翻转等。源码层面的 adjust 解析流程Geometry._createAdjustadjust为字符串时包装为{ type: adjust }通过AdjustMap找到对应构造函数{ Stack, Dodge, Jitter, Symmetric }其中 Jitter 也存在于依赖包中但不属于文档声明的三种对外类型将attrs.x.field、attrs.y.field注入配置构造调整实例Dodge 类型会强制设置adjustNames [x]沿 x 轴方向分组散开。以 Stack 的实现 为例process()会将同一 x 值下的数据按 y 正负分别缓存累加累加后的yField被改写为[起点, 终点]区间数组——这正是区间类图形柱、面积层叠绘制的数据基础。viewClip 属性图表区域裁剪viewClip为true时图形只在坐标轴包围的图表区域两轴之间内显示。Geometry.getClip 会基于coord的left/top/contentWidth/contentHeight生成一个矩形裁剪区域并透传给各组件 View 渲染。三、统一方法几何标记的公共 API所有几何标记组件共享以下方法可在组件实例上直接调用可通过chart.getGeometry()或组件引用获取实例。getXScale() / getYScale()获取 x / y 轴的 scale比例尺对象常用于读取坐标轴范围、字段名、tick 等。返回值Scale 对象// 在组件实例中调用 const xScale lineComponent.getXScale(); const yScale lineComponent.getYScale();源码实现packages/f2/src/components/geometry/index.tsx#L619-L625getXScale(): Scale { return this.getAttr(x).scale; } getYScale(): Scale { return this.getAttr(y).scale; }scale 对象来自AttrController的 attr 实例其类型与数据字段的实际类型对应category / linear / timeCat / identity 等。除 x、y 外基类还提供getColorScale()获取颜色映射的 scale。getSnapRecords(point)根据 canvas 坐标点获取对应图形的数据记录是 Tooltip、点击选中、自定义交互的核心入口。参数point-{ x: number, y: number }格式的坐标点对象返回值匹配的数据记录数组// 获取鼠标位置对应的数据 const records lineComponent.getSnapRecords({ x: 100, y: 200 }); console.log(records); // [{ genre: Sports, sold: 5 }, ...]使用场景实现图表交互如 Tooltip 提示框获取鼠标悬停位置的数据实现自定义的点击选中功能。源码解析Geometry.getSnapRecords完整链路如下通过coord.invertPoint(point)将 canvas 像素坐标反算为归一化坐标可选参数inCoordRange为true时将超出 scale range 的坐标钳制到合法范围内将图形记录拍平flatRecords()见源码构造coordRecord包含归一化坐标点、原始值xValue/yValue、文本xText/yText饼图特判当adjust stack且 coord 为极坐标时走_getXSnapRecords/_getYSnapRecords分支按角度/半径方向匹配区间记录普通场景下用_getXSnap找到最近的 x 分类值源码再在记录中匹配origin[xField]相等的项timeCat类型字段则通过时间戳比对。这一方法的正确性由测试覆盖例如 packages/f2/test/components/geometry/getSnapRecords.test.tsx 中针对 category / linear / 区间型数据的取点验证。getRecords(data, field)与getSnapRecords配套的按原始数据值查询记录的方法传入一条原始数据返回其在图形中对应的全部映射记录源码。field参数可指定按xfield默认还是yfield匹配。getLegendItems()从 color 属性中提取图例项当 color 的 scale 为分类category类型时返回[{ field, color, name, tickValue }]结构的图例数组源码供 Legend 组件消费。其他常用实例方法getAttr(attrName)获取指定属性的 attr 实例如color、size、shapegetY0Value()获取 y 轴零点的 scale 值Interval、Area 计算图形基准线时使用见源码flatRecords()将分组后的 records 拍平为一维记录数组。四、设计理念为什么几何标记要作为统一基类几何标记的作用几何标记是数据到图形的映射层在 F2 架构中处于 Chart持有数据与坐标与图形 View绘制具体图形之间负责四件事数据映射将数据字段映射到视觉属性位置、颜色、大小等图形绘制根据映射结果绘制具体的图形元素动画处理管理图形的进场、更新、离场动画交互支持提供数据查询getSnapRecords、坐标转换coord.convertPoint/invertPoint等交互能力。从源码看Geometry.mapping()源码调用_mapping完成「数据 → 视图属性」的核心转换线性属性x、y对每个元素走normalize后经coord.convertPoint转换为画布坐标非线性属性color、size、shape如果是 Linear scale 则逐元素 mapping如果是 Category / Identity 则只对分组的第一条记录做一次 mapping源码 中的nonlinearAttrs分支。为什么有继承关系通过继承 Geometry 基类F2 获得三层收益统一 API所有图表类型使用相同的属性命名和配置方式x/y/color/size/adjust/animation在任何组件上含义一致代码复用公共逻辑数据预处理_processData、属性控制器AttrController、数据分组_groupData、scale 调整_adjustScales、图形裁剪getClip、事件绑定_initEvent、选中样式getSelectionStyle只需实现一次一致性用户学习一个组件后能快速上手其他组件——Line 与 Interval 的配置差异仅在于各自getDefaultCfg与mapping覆写。子组件如何差异化子类通过覆写mapping()实现各自图形语义例如Line.mapping处理connectNulls空值连接、极坐标闭合、sizeZoom缩放、以及 y 为区间数组时的上下边界拆分Interval.mapping调用coord.convertRect({ x, y, y0, size })将归一化数据转换为矩形并合并高亮与选中样式Area.mapping在折线基础上向baseY基线闭合形成面积Candlestick.mapping基于开盘/收盘价比较自动着色涨红#E62C3B、跌绿#0E9976、平盘#999999。五、数据映射管线从原始数据到画布图形的完整链路理解几何标记的关键在于掌握它内部的数据处理管线。结合源码一次渲染的完整流程如下对应 Geometry 生命周期方法原始数据 props.data │ ▼ _saveOrigin() // 为每条记录挂载 origin 引用保留原始数据 │ ▼ _groupData() // 按 color/size/shape 等分组属性的分类 scale 分组 │ ▼ _createAdjust() // 实例化 adjuststack/dodge/symmetric │ ▼ _adjustData() // 执行数据调整改写 x/y 字段为区间数组 │ ▼ _adjustScales() // 调整 scalestartOnZero、饼图 scale、stack 范围 │ ▼ mapping() / _mapping() // 属性映射 coord.convertPoint 得到画布坐标 │ ▼ 子组件覆写 mapping() // Line/Interval/Area/Candlestick 各自的图形语义 │ ▼ render() // 交给对应 View 绘制各环节说明_saveOrigin源码将原始记录挂到origin字段下后续getSnapRecords、样式回调、选中判断都依赖origin拿到原始数据_groupData源码通过attrController.getGroupScales()获取 color/size/shape 中的分类 scale用groupToMap按这些字段分组组内children为同组数据_adjustData源码调用adjust.adjust.process(groupedArray)Dodge 前先做数值化_numbericprocess 返回的新数组写回record.children_adjustScales源码startOnZero时调用chart.scale.adjustStartZero(y.scale)饼图极坐标 transposed stack时调用adjustPieScale关闭 nicestack 时调用_updateStackRange根据拍平的数据更新 y 轴范围_mapping源码线性属性逐元素 normalize 并coord.convertPoint非线性属性仅对每组首条记录 mapping最后为每条记录组装x/y/normalized/shapeName/shape/selected等字段_sortData源码仅当子组件设置sortable: true如 Line、Area时按 x scale 对组内数据排序timeCat类型走时间戳排序。当数据更新时willUpdate若 data/adjust/attr 配置未变则复用dataRecords仅重新执行_readjustData做数据调整避免重复开销源码。六、事件与选中交互能力的统一实现统一事件绑定几何标记组件支持onPressStart、onPress、onPressEnd、onPan、onPanStart、onPanEnd六类交互事件。Geometry._initEvent 会将用户传入的事件回调注册到 chart 上并在事件对象上挂载ev.geometry this便于回调内访问组件实例。选中Selection机制由于 Geometry 继承自 Selection 基类每个几何标记都支持selection属性属性类型默认值描述triggerOnclick \| press \| stringclick触发选中的事件typesingle \| multiplesingle单选 / 多选defaultSelectedany[]-默认选中项原始数据数组selectedStyleobject \| (record) object-选中样式unSelectedStyleobject \| (record) object-未选中样式cancelablebooleantrue是否允许取消选中onChangeFunction-选中变化回调参数{ selected }其内部实现Selection.didMount利用getSnapRecords在触发事件时解析点击位置命中的记录再根据单选/多选逻辑更新 state 并回调onChangeisSelected通过比较全部 scale 字段判断记录是否被选中从而应用selectedStyle/unSelectedStyle源码。Interval 组件在 mapping 中显式合并了getSelectionStyle结果withInterval.tsx#L102实现点击柱子的高亮/变暗效果。七、快速导航按图表类型查阅详细文档折线图Line 组件文档含完整属性表、style/animation/adjust 示例柱状图Interval 组件文档散点图Point 组件文档面积图Area 组件文档K线图Candlestick 组件文档按配置主题查阅颜色映射各组件文档中的 color 属性章节如 Line 的 color 属性动画配置各组件文档中的 animation 属性章节数据调整各组件文档中的 adjust 属性章节深入源码的入口Geometry 基类packages/f2/src/components/geometry/index.tsx属性控制器AttrControllerpackages/f2/src/controller/attr.ts数据调整实现packages/f2/src/deps/f2-adjust/src/adjusts/stack / dodge / symmetric / jitter选中基类packages/f2/src/components/geometry/selection.ts测试用例packages/f2/test/components/geometry/覆盖 adjust、attr、getSnapRecords、空数据等场景文档设计说明为了方便查阅每个几何标记组件的详细文档都包含完整的属性说明含继承的通用属性和组件特有属性无需跨页跳转本文档作为几何标记组件的概览与导航统一方法与设计理念见上文相应章节。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐Egg.js 路由Router完全指南URL 与 Controller 的映射实战与底层原理Egg.js 路由Router完全指南URL 与 Controller 的映射实战与底层原理 本指南以 Egg.js 官方路由文档为核心系统讲解如何在后端Web框架Altair 矩形标记rect mark完全指南热力图、区间矩形与数据标注图层Altair 矩形标记rect mark完全指南热力图、区间矩形与数据标注图层 本文基于 Altair 官方用户指南《 Rect 矩形标记 https:/数据可视化终极指南KaTeX几何符号完整支持方案终极指南KaTeX几何符号完整支持方案 KaTeX作为一款快速的Web数学排版引擎不仅支持复杂的数学公式还提供了丰富的几何符号和图形标记功能。本文将全面介前端上一篇告别闪电加载用ComcastifyJS打造怀旧网络体验下一篇HsMod深度解析炉石传说终极游戏体验增强框架完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考