数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载坐标轴Axis是 F2 图表中承载数据范围与刻度信息的核心组件它决定了用户如何读取数据分布与变化趋势。本篇指南以 F2 官方示例文档为骨架围绕labelAutoRotate自动旋转、labelAutoHide自动隐藏两项高频能力展开并结合仓库源码与测试用例深入讲解 Axis 的完整 API、样式定制方案与底层工作原理帮助你彻底掌控移动端图表坐标轴的配置细节。Axis 在 F2 中的作用在 F2 中坐标轴由两个维度的轴组成分类轴通常是 x 轴与数值轴通常是 y 轴。Axis 组件负责把数据字段对应的比例尺Scale刻度渲染到画布上包含四个组成元素网格线grid辅助读数的背景线条刻度线tickLine轴上的小刻度标记轴线line坐标轴本体线条标签label每个刻度对应的文本。这些元素既可以通过style属性逐一定制也可以整体隐藏。组件本身不产生数据而是从Chart上读取对应字段的比例尺刻度再结合坐标系直角/极坐标完成定位渲染入口实现位于 index.tsx渲染分派逻辑见 axisView.tsx极坐标下按dimType分派给 PolarX / PolarY直角坐标下按position分派给 Top / Bottom / Left / Right 四个方向的视图。基础用法声明坐标轴Axis 通常搭配Chart、图形几何如Interval一起使用。只需要为每个需要展示的字段声明一个AxisF2 会自动从比例尺中计算并绘制刻度import { jsx, Canvas, Chart, Interval, Axis } from antv/f2; const data [ { category: Category1, value: 10 }, // ... ]; const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldcategory / Axis fieldvalue / Interval xcategory yvalue color#2FC25B / /Chart /Canvas );field指明该轴绑定的数据字段名与Interval的x、y映射保持一致。当移动端屏幕宽度有限、分类刻度特别多时标签很容易互相重叠此时就需要用到 F2 的标签自动处理能力。自动旋转标签labelAutoRotate当坐标轴标签过长或数量过多时可以启用自动旋转功能避免标签重叠。在Axis上开启labelAutoRotate{true}F2 会先检测标签是否发生重叠若重叠则自动为标签计算一个合适的旋转角度让每个标签都能完整展示import { jsx, Canvas, Chart, Interval, Axis } from antv/f2; const data [ { category: Category1, value: 10 }, { category: Category2, value: 15 }, { category: Category3, value: 20 }, { category: Category4, value: 25 }, { category: Category5, value: 30 }, { category: Category6, value: 35 }, { category: Category7, value: 40 }, { category: Category8, value: 45 }, { category: Category9, value: 50 }, { category: Category10, value: 55 }, { category: Category11, value: 60 }, { category: Category12, value: 65 }, { category: Category13, value: 70 }, { category: Category14, value: 75 }, { category: Category15, value: 80 }, ]; const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldcategory labelAutoRotate{true} / Axis fieldvalue / Interval xcategory yvalue color#2FC25B / /Chart /Canvas );对应完整可运行示例位于 labelAutoRotate.jsx。旋转角度的计算原理从源码看自动旋转并非固定角度而是动态计算的。在 withAxis.tsx 的findSuitableRotation方法中F2 会通过_getXTicksDistance测量相邻两个刻度点之间的平均间距averageSpace用measureText测量首个标签文本的宽高取labelHeight结合安全距离源码中常量safetyDistance 2得到可用纵向空间availableSpace labelHeight safetyDistance计算sinValue availableSpace / averageSpace将其钳制在[-1, 1]区间后通过反三角函数Math.asin求出理论角度再向上取整得到最终旋转角ceiledAngle若角度在(0, 90]范围内则为每个 tick 的labelStyle注入transform: rotate(Xdeg)并将align置为start、transformOrigin设为0 50%。这解释了为什么标签数量越多、间距越小计算出的旋转角会越大而当标签本身不重叠时hasOverlap返回 false则完全不会触发旋转保持水平展示。自动隐藏标签labelAutoHide当标签数量过多、即使旋转也无法容纳时可以改用自动隐藏F2 会检测重叠情况并按等间隔抽稀的策略隐藏部分标签同时尽可能保留首、尾标签以保证数据范围的语义完整。import { jsx, Canvas, Chart, Interval, Axis } from antv/f2; const data Array.from({ length: 100 }, (_, i) ({ category: Cat${i 1}, value: ((i % 10) 1) * 10, })); const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldcategory labelAutoHide{true} / Axis fieldvalue / Interval xcategory yvalue color#722ED1 / /Chart /Canvas );对应完整示例位于 labelAutoHide.jsx。100 个分类刻度在移动端显然无法全部展示开启后 F2 会自动保留等间隔的若干标签图表依旧可读。抽稀策略的源码解读自动隐藏的核心逻辑在 withAxis.tsx 的findLabelsToHide方法中先由hasOverlap计算出所有标签的宽度得到最大标签宽度maxLabelWidth以maxLabelWidth / (坐标轴宽度 / 刻度总数)估算初始抽稀步长initialSeq在不超过总刻度一半maxSeq floor(range / 2)的前提下逐步增大步长并用hasOverlapAtSeq验证每隔 N 个刻度取一个标签是否仍然重叠若始终找不到完美步长则退化为仅保留第一个与最后一个标签当总刻度数超过阈值SHOW_MIDDLE_LABEL_THRESHOLD 10时还会额外保留中间位置的标签最终通过给 tick 设置visible: false来隐藏对应标签渲染层在 bottom.tsx 中会直接跳过不可见的 tick。值得注意的是labelAutoRotate与labelAutoHide可以同时开启updateCoord中会先检测重叠若重叠则先尝试旋转findSuitableRotation再执行隐藏findLabelsToHide两者协同工作见 withAxis.tsx。完整 API 一览原文档 API 表格中的五个属性全部保留并补充源码中 types.d.ts 定义的其他常用属性属性名类型默认值说明fieldstring-绑定的数据字段名labelAutoRotatebooleanfalse是否启用标签自动旋转labelAutoHidebooleanfalse是否启用标签自动隐藏safetyDistancenumber2标签之间的安全距离用于重叠检测与旋转计算文档 API 表标注为 0源码中默认值为 2以实际源码为准styleobject-自定义样式配置见下文样式定制visiblebooleantrue是否显示该坐标轴设为false可整体隐藏positionstring自动坐标轴显示位置right/left/top/bottom不传时根据字段维度与是否转置自动推断formatterfunction-刻度文本格式化回调同时影响 axis、legend、tooltip 上的显示typestring-比例尺类型如cat、linear、timeCattickCountnumber-刻度数量对连续型比例尺生效rangeany-刻度显示范围maskstring-时间刻度格式化模板如YYYY-MM-DDmin / maxnumber-强制指定轴的最小值 / 最大值niceboolean-是否将刻度取整为友好数值ticksArray-手动指定刻度值测试用例传入 ticks展示了该用法见 axis.test.tsxgridstring-极坐标下网格线类型line或arcsafetyDistance 的实际语义field之外safetyDistance是影响标签自动处理效果的关键参数。源码中hasOverlapAtSeqwithAxis.tsx在判断两个标签的间距是否足够时要求相邻标签半宽之和再加上px2hd(safetyDistance)仍小于刻度间距否则判定为重叠。调大该值会让自动旋转/隐藏更激进更早触发调小则更保守。findSuitableRotation内部计算旋转角时同样使用了安全距离 2。样式定制style 详解style是 Axis 最灵活的定制入口可控制网格线、刻度线、轴线、端部箭头与标签样式。以底部轴渲染实现 bottom.tsx 为准支持以下字段字段说明grid网格线样式stroke、lineWidth、lineDash等也可传回调函数(text, index, total) LineStyleProps实现逐条定制tickLine刻度线样式length控制刻度线长度如{ length: 3 }line轴线样式设置line: {}即可显示轴线symbol轴线端部符号箭头/圆点等传数组可分别控制两端如[{ type: circle }, { type: arrow }]label标签文本样式支持fontSize、fill、align、textBaseline等也可传回调函数逐刻度定制labelOffset标签与轴线之间的距离支持数值或字符串如8px、50pxwidth/height手动指定坐标轴占用的宽高如{ height: 100px }覆盖自动测量结果标签对齐与回调定制label的align属性在底部轴上有更丰富的取值除常规left / right / center / start / end外还支持between与auto见 types.d.tsbetween让首标签左对齐、尾标签右对齐、中间标签居中适用于区间型刻度auto自动检测标签是否超出轴范围超出时把标签拉回绘图区内侧避免被画布裁切。label和grid都支持回调函数回调签名分别是(text, index, total)返回样式对象即可实现按刻度值差异化染色这类需求。测试用例label 回调中即通过回调让正值显示为红色、负值显示为绿色、零值加粗见 axis.test.tsx。同时可用formatter统一改写刻度文本格式例如formatter{(v) v.toFixed(2) %}。坐标轴的测量与布局更新一个容易被忽略但重要的机制是坐标轴不只是画线它还会主动参与图表整体布局。在 withAxis.tsx 的measureLayout与updateCoord中组件通过measureText测量所有标签的最大宽高加上labelOffset得到轴占用的空间调用chart.updateCoordFor(this, layout)把该空间从绘图区扣除确保图形几何如柱子不会被坐标轴标签遮挡当开启自动旋转/隐藏时还会额外为最右侧溢出的标签预留空间calculateLabelOverflow计算overflowWidth。正因如此style.width / style.height可以手动覆盖自动测量的布局占用测试用例定义宽高axis.test.tsx展示了Axis fieldtime style{{ height: 100px }} /的用法。此外构造 Axis 时还会通过chart.setScale把type / tickCount / range / mask / formatter / min / max / nice / ticks这些比例尺配置注册到 Chart 上withAxis.tsx因此轴上的刻度密度、范围与格式化均由 Axis 一处配置即可驱动。极坐标下的坐标轴Axis 同样支持极坐标系雷达图、玫瑰图等。在coordpolar下x 维度轴呈环形、y 维度轴呈放射状分别由 polar-x.tsx 与 polar-y.tsx 渲染。极坐标下可通过grid: arc | line指定网格线形态y 轴还会依据 x 轴刻度自动生成环状网格交叉点_generateGridPoints见 withAxis.tsx。测试用例弧形网格线与grid回调axis.test.tsx提供了极坐标 网格定制、visible{false}隐藏 y 轴等典型写法。小结F2 的 Axis 组件以极简的 JSX 声明方式覆盖了移动端坐标轴的全部诉求标签拥挤时交给labelAutoRotate与labelAutoHide自动处理观感不满时通过style逐元素定制刻度语义不对时用formatter、ticks、tickCount等比例尺能力修正还能在极坐标场景下无缝切换。理解其测量—布局—渲染的流水线withAxis.tsx与四个方向的渲染实现rect 目录下的 bottom/left/right/top即可在实际项目中精准驾驭坐标轴让移动端图表既紧凑又清晰。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐F2 坐标轴 Axis 组件完全指南从配置参数到源码原理F2 坐标轴 Axis 组件完全指南从配置参数到源码原理 F2 坐标轴Axis是图表中承载数据度量映射、展示刻度与网格的关键组件负责把数据字段转换为可视数据可视化前端解决90%数据可视化痛点ECharts坐标轴标签自动旋转完全指南解决90%数据可视化痛点ECharts坐标轴标签自动旋转完全指南 你是否还在为长文本标签重叠而烦恼是否尝试过手动调整旋转角度却效果不佳本文将系统讲解ECh数据可视化图表库前端visx/axis 坐标轴组件全指南从四个预置轴到自定义渲染visx/axis 坐标轴组件全指南从四个预置轴到自定义渲染 坐标轴Axis是图表中帮助读者理解数据的关键元素它由一条轴线、刻度线ticks、刻度数据可视化前端图表库上一篇Element Plus中el-select组件空值回显问题解析下一篇揭秘AAA算法与BLAS实现的隐秘联系如何解决插值结果忽快忽慢的问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
