F2 Chart 图表组件完整指南：坐标系、度量配置、样式与主题定制

数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载Chart 是 F2 图表库的核心组件负责创建各类统计图表并向子组件几何标记、坐标轴、图例等统一提供坐标系、度量scale和数据过滤能力。本文基于 Chart 官方 API 文档 并结合 Chart 源码 深入讲解其 Props 配置、底层控制器原理与主题机制读完你可以熟练地在移动端画布中搭建、定制和动态更新任意统计图表。快速上手一段声明式图表的骨架Chart 以 JSX 声明式语法工作通常作为Canvas的子组件使用内部再嵌套几何标记组件如Interval、Line、Area、Point。文档中的最小示例import { Canvas, Chart, Interval } 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} Interval xgenre ysold colorgenre / /Chart /Canvas从 Chart 渲染实现 可以看到Chart 在render阶段会从数据源读取经过滤后的数据并把data、chart当前实例、layout布局信息、coord坐标系实例以及scaleOptions注入到每一个子组件中从而完成整张图表的装配。TypeScript 泛型获得完整的类型推断Chart 是泛型组件传入自定义数据类型即可让子组件、度量配置获得完整的类型提示与编译期校验ChartMyDataType data{data} ... /Chart该泛型约束定义在 ChartProps 与 Data.d.ts 中ChartPropsTRecord extends DataRecord DataRecord其中DataRecord Recordstring, anyDataTRecord TRecord[]。测试用例 chart/index.test.tsx 中就以type TRecord typeof data[0]的方式声明了数据记录类型并配合ChartTRecord、AxisTRecord、IntervalTRecord使用。Props 总览与类型定义官方类型定义如下interface ChartPropsTRecord extends DataRecord DataRecord { /** 数据源必填 */ data: DataTRecord; /** 度量配置 */ scale?: DataRecordScaleTRecord; /** 坐标系配置 */ coord?: CoordType | CoordProps; /** 图表容器样式 */ style?: GroupStyleProps; /** 主题配置 */ theme?: Recordstring, any; /** 子组件 */ children?: any; } type DataRecord Recordstring, any; type DataTRecord TRecord[]; type ScaleType identity | linear | cat | timeCat | log | pow; type CoordType rect | polar;其中ScaleType与CoordType的完整定义见 Scale.d.ts 和 Coord.d.ts。data可视化数据源必填类型为对象数组。数据是度量和坐标系计算的基础Chart 构造时会用new ScaleController(data)创建度量控制器见 chart/index.tsx。数据的变更处理在 willReceiveProps 中当data引用变化时调用scale.changeData(nextData)重建所有度量当scale配置变化时调用scale.update(nextScale)增量更新。因此 F2 支持直接在更新阶段替换 data/scale 实现图表刷新这也是 chart/index.test.tsx 中canvas.update(...)所验证的行为。scale度量配置scale用于定义数据字段的度量类型和配置是按字段key 为字段名组织的对象。未指定type时会根据数据类型自动推断推断逻辑位于 controller/scale.ts 的 _getType数值类型 →linear字符串类型 →cat常量字段 →identity需要说明的是源码层 F2 通过registerScale注册了cat / category / identity / linear / log / pow / time / timeCat / quantize / quantile多种度量见 controller/scale.ts类型定义中的ScaleType是其中最主要的几种。通用属性所有度量类型都支持的属性属性类型默认值说明typeScaleType自动推断度量类型formatter(value) string \| number-格式化坐标轴刻度点文本同时影响坐标轴 axis、图例 legend、提示信息 tooltip 上的显示range[number, number][0, 1]输出数据范围min、max 均为 0 至 1aliasstring-字段显示别名常用于将英文字段名显示为中文名tickCountnumber-坐标轴刻度点个数不同度量类型默认值不同ticksstring[] \| number[]-指定刻度点文本设置后按 ticks 的个数和文本显示sortableboolean-数据已排序时设为 false 可提升性能linear 度量连续数值连续数值类型type 可省略默认 linearscale{{ sold: { min: 0, max: 100, nice: true }, }}属性类型默认值说明nicebooleantrue优化数值范围使刻度均匀分布。例如原始范围 [3, 97]nice 为 true 时调整为 [0, 100]minnumber自动计算最小值maxnumber自动计算最大值tickIntervalnumber-刻度间隔原始数据间距差值tickCount 和 tickInterval 不可同时声明源码中 linear 类型默认开启 nice并在未显式指定 min/max 时用getRange(values)自动计算极值见 controller/scale.ts。cat 度量分类分类类型type 可省略scale{{ genre: { values: [Sports, Strategy, Action] }, }}属性类型默认值说明valuesstring[]-指定分类值及其顺序isRoundingbooleanfalse计算 ticks 时是否允许取整以满足刻度均匀分布取整后可能与设置的 tickCount 不符对 cat 与 timeCat源码会自动计算输出range只有一项时居中显示为[0.5, 1]justifyContent开启时居中分布否则尾部留出1/count的空隙见 controller/scale.ts。timeCat 度量时间分类时间分类类型通常需要显式声明 typescale{{ date: { type: timeCat, mask: YYYY-MM-DD }, }}属性类型默认值说明maskstringYYYY-MM-DD日期格式化格式valuesstring[]-指定分类值及其顺序度量与图表的联动方法除静态配置外Chart 实例还暴露了与度量配套的 API均委托给ScaleController见 chart/index.tsxsetScale(field, option)动态设置某字段的度量配置已创建的度量会随之change更新见 controller/scale.tsgetScale(field)/getScales()获取度量实例getXScales()/getYScales()/getColorScales()按几何标记取各轴向度量。此外ScaleController还内置了adjustStartZero堆叠柱从 0 点对齐、adjustPieScale饼图关闭 nice、_updateStackRange堆叠场景重算 min/max等供上层几何组件调用的能力见 controller/scale.ts。度量详细介绍可见度量教程。coord坐标系配置coord定义图表坐标系配置会交给CoordController处理见 controller/coord.ts支持字符串rect | polar、对象或自定义坐标系构造函数未指定 type 时默认rect。rect 直角坐标系type 可省略默认为 rectcoord{{ transposed: true }}属性类型默认值说明typerectrect坐标系类型transposedbooleanfalse是否翻转坐标系Rect 实现 将数据空间映射为x: [left, left width]、y: [top height, top]的像素区间。polar 极坐标系coord{{ type: polar, startAngle: -Math.PI / 2, endAngle: Math.PI * 1.5, radius: 0.8, innerRadius: 0.5, }}属性类型默认值说明typepolar-坐标系类型transposedbooleanfalse是否翻转坐标系startAnglenumber-起始弧度endAnglenumber-结束弧度innerRadiusnumber-内半径0-1 范围radiusnumber-半径0-1 范围innernumber-已弃用请使用 innerRadiusPolar 实现 中默认startAngle -Math.PI/2、endAngle (Math.PI*3)/2radius默认 1、innerRadius默认 0实际半径取宽高的最小值radiusRatio * (Math.min(width, height) / 2)极坐标下 x 表示弧度、y 表示半径。transposed会交换 x/y 维度convertPoint/invertPoint负责像素坐标与数据坐标互转饼图、玫瑰图的定位即依赖此机制。坐标系详细介绍可见坐标系教程。坐标系与布局的联动CoordController的updateLayout会按style中的 padding 计算实际绘图区域controller/coord.ts坐标轴、图例等组件通过layoutCoord/updateCoordFor占位为周边组件留出空间见 chart/index.tsx。从源码结构可以推断图表区域的实时划分正是由 Chart 协调各子组件的位置布局完成的。style图表容器样式样式属性继承自antv/g-base的GroupStyleProps支持数字和字符串单位style{{ left: 50, top: 0, width: 100%, height: 100%, padding: [40px, 40px, 40px, 40px], }}Chart 会把style与主题中的theme.chart合并再经px2hd换算为物理像素见 chart/index.tsx 的 getStyle。style变化时willReceiveProps会同步coord.updateLayout重新计算坐标系区域见 chart/index.tsx。theme主题配置主题用于覆盖默认主题样式传入的配置会与默认主题深度合并Chart 构造时通过deepMix(px2hd(Theme), theme)合并见 chart/index.tsxtheme{{ chart: { padding: [40px, 40px, 40px, 40px] }, colors: [#1890FF, #2FC25B, #FACC14], }}常用配置项配置项类型默认值说明chart.paddingstring[] \| number[][30px, 30px, 30px, 30px]图表内边距colorsstring[]见源码默认配色数组axisobject见源码坐标轴配置见 Axis 文档完整默认主题见 packages/f2/src/theme.ts。从源码可以看到默认主题的完整结构chart.padding默认[30px, 30px, 30px, 30px]theme.tscolors默认 8 色[#1890FF, #2FC25B, #FACC14, #223273, #8543E0, #13C2C2, #3436C7, #F04864]theme.ts还包含shapes各几何标记可选形状、sizes点大小序列、shape各形状默认样式、axis坐标轴线/刻度/网格/label 样式与guide辅助元素默认样式等配置块。进阶Chart 实例的数据过滤与高亮除了声明式配置Chart 实例还提供filter与highlight两个数据交互方法见 chart/index.tsx// 过滤只保留满足条件的记录 chart.filter(genre, (value, record) value Sports); // 高亮命中条件的记录正常显示其余置为半透明 chart.highlight(genre, (value, record) value Action); // 清除高亮 chart.highlight(genre, null);filter的结果会在_getRenderData中逐字段应用于原始数据chart/index.tsxhighlight则通过getHighlightStyle为未命中记录附加opacity: 0.5。配合getPosition(record)数据记录到画布坐标的换算chart/index.tsx与getSnapRecords(point)命中检测chart/index.tsx即可实现 tooltip、联动筛选等交互场景。小结Chart 是 F2 中承上启下的核心组件向上对接Canvas与数据源向下为几何标记、坐标轴等子组件提供coord、scale、layout与过滤后的数据。掌握data、scale、coord、style、theme五类 Props 的语义与底层控制器行为即可在移动端灵活搭建从柱状图、折线图到饼图、玫瑰图、雷达图的各类统计图表并实现数据动态更新、过滤高亮等交互能力。更多相关参考坐标系、度量、Axis 坐标轴。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐OpenSEO成本完全解析DataForSEO费用如何估算5步算清每月花费OpenSEO成本完全解析DataForSEO费用如何估算5步算清每月花费 OpenSEO 是一个开源的一体化 SEO 工具作为 Semrush 和 Ah数据可视化前端React Native Elements 深度定制指南从主题配置到组件样式React Native Elements 深度定制指南从主题配置到组件样式 前言 React Native Elements 作为一款优秀的 React NUI组件移动开发前端Mermaid.js主题定制个性化图表样式的深度配置Mermaid.js主题定制个性化图表样式的深度配置 你是否厌倦了千篇一律的图表样式想要为你的技术文档、项目报告或演示文稿打造独一无二的可视化效果Merm图表库前端数据可视化上一篇终极指南doccano多模态数据标注实战 - 文本与图像联合标注完全教程下一篇MFE-starter单元测试覆盖率提升从70%到95%的实战技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考