数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载Magnifier 是 F2 图表库内置的局部放大组件它在图表上绘制一个圆形放大镜将数据密集区域的指定索引范围内的折线细节等比放大展示帮助移动端用户在有限的画布中看清曲线拐点与数值波动。本文基于 Magnifier 官方文档 与仓库源码withMagnifier.tsx、magnifierView.tsx系统讲解其 Props 配置、圆内数据重映射原理、参考线绘制以及常见问题排查读完即可在真实图表中直接上手使用。什么时候需要放大镜数据点过于密集时间序列、K 线等场景下几十上百个点挤在一屏肉眼难以分辨细微波动需要放大特定区域进行详细分析只关心某一段区间如最近一周的走势细节需要突出显示某段数据范围在不打断整体折线的前提下让重点区间以放大的形态独立呈现。放大镜与 F2 的另一交互组件 Zoom 定位不同Zoom 通过手势缩放改变整个坐标系的可见范围而 Magnifier 不动主图坐标系仅在圆内重建一个针对聚焦数据的局部坐标系实现画中画式放大。基础示例在Chart内声明Magnifier并指定必填的focusRange聚焦的数据索引范围即可import { Canvas, Chart, Line, Magnifier } from antv/f2; const data [ { date: 2024-01-01, value: 10 }, { date: 2024-01-02, value: 15 }, { date: 2024-01-03, value: 8 }, { date: 2024-01-04, value: 25 }, { date: 2024-01-05, value: 30 }, { date: 2024-01-06, value: 28 }, { date: 2024-01-07, value: 35 }, ]; Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Line xdate yvalue / Magnifier focusRange{[2, 5]} / /Chart /Canvas运行效果如下图所示折线图的右上角出现一个圆形放大镜圈内展示focusRange对应区间的局部折线放大形态。该渲染结果来自仓库测试快照 magnifier-test-tsx-magnifier-basic-render-1-snap.png。Props 完整配置TypeScript 类型定义interface MagnifierProps { /** 放大镜聚焦的数据范围索引 [startIndex, endIndex]必填 */ focusRange: [number, number]; /** 放大镜半径支持像素值如 50px或数字 */ radius?: number | string; /** 放大镜中心位置 [x, y]支持数字或带 px 的字符串 */ position?: [number, number] | [string, string]; /** 放大镜 X 轴偏移量 */ offsetX?: number | string; /** 放大镜 Y 轴偏移量 */ offsetY?: number | string; /** 放大镜内数据线条的样式配置 */ lineStyle?: { [key: string]: any; }; /** 放大镜外框圆形的样式配置支持 circle 组件属性如 stroke、lineWidth、fill 等 */ frameStyle?: { [key: string]: any; }; /** 辅助线配置 */ referenceLines?: Array{ /** 辅助线数据记录数组需包含与图表 x/y 字段匹配的数据。x 字段支持特殊值 min放大镜左侧、max放大镜右侧 */ records: any[]; /** line 组件样式如 stroke、lineWidth、lineDash、lineCap、lineJoin、opacity 等 */ style?: { [key: string]: any; }; }; }完整类型定义位于 withMagnifier.tsx。从源码可见组件内部还接收chart与coord坐标系对象作为隐式注入的 props用于定位放大镜与读取几何图形数据。基础配置属性类型默认值说明focusRange[number, number]-放大镜聚焦的数据范围索引 [startIndex, endIndex]必填radiusnumber \| string50px放大镜半径支持像素值如50px或数字position[number, number]见说明放大镜中心点位置。默认为[right - radius, top radius]圆的右上角贴近画布边界支持像素值数字或带 px 的字符串radius与position的默认值来自 withMagnifier.tsx 中的defaultProps。默认position的计算逻辑位于getPositionAndRadius()withMagnifier.tsx取坐标系区域的right、top边界以[right - radius, top radius]作为圆心使圆贴靠在绘图区的右上角内侧。偏移配置属性类型默认值说明offsetXnumber \| string0放大镜 X 轴偏移量offsetYnumber \| string0放大镜 Y 轴偏移量偏移量在getPositionAndRadius()中统一作用于最终圆心position [position[0] offsetX, position[1] offsetY]。当默认位置遮挡了主图关键区域时可通过偏移微调测试用例 magnifier.test.tsx 中即使用了offsetX{-100px}、offsetY{20px}将放大镜从默认位置向左下移动。样式配置属性类型默认值说明lineStyleobject-放大镜内数据线条的样式配置frameStyleobject-放大镜外框圆形的样式配置支持stroke、lineWidth、fill等 circle 组件属性在视图层 magnifierView.tsx 中外框circle的默认样式为fill: transparent、stroke: #d8d8d8、lineWidth: 2pxframeStyle通过展开运算符覆盖这些默认值放大镜内每条折线polyline默认stroke取自数据系列的color若 Line 未显式指定颜色则为主题默认色lineWidth: 5px再由lineStyle覆盖。注意文档与源码中的样式属性名均以lineWidth为准而非strokeWidthframeStyle中可传入background、boxShadow、border等用于快照测试的扩展样式字段。辅助线配置属性类型默认值说明referenceLinesarray-辅助线配置数组每条线包含数据点和样式referenceLines 配置interface ReferenceLine { /** 辅助线数据记录数组需包含与图表 x/y 字段匹配的数据。x 字段支持特殊值 min放大镜左侧、max放大镜右侧 */ records: any[]; /** line 组件样式如 stroke、lineWidth、lineDash、lineCap、lineJoin、opacity 等 */ style?: { [key: string]: any; }; }使用说明records数组中的每个对象必须包含与图表 x/y 字段对应的属性x 字段支持特殊值min表示放大镜左侧起点max表示放大镜右侧终点源码 withMagnifier.tsx 中还额外支持median归一化 0.5即圆内水平中点三者分别被映射为归一化坐标0、1、0.5常用于绘制水平阈值线、警戒线、平均值线等若要绘制水平线保持 y 值固定x 从min到max。辅助线在视图层以line图元绘制magnifierView.tsx默认样式stroke: #d8d8d8、lineWidth: 5px由style覆盖。带参考线的渲染结果可见快照 magnifier-test-tsx-magnifier-lines-render-1-snap.png放大镜圆内的折线下方出现一条贯穿的水平参考线。使用示例基础放大镜指定聚焦范围显示放大镜Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[3, 6]} / /Chart /Canvas自定义大小和位置设置放大镜的半径和显示位置Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[2, 5]} radius80px position{[350, 100]} / /Chart /Canvas使用偏移量调整位置通过偏移量微调放大镜位置Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[2, 5]} radius60px offsetX20px offsetY-10px / /Chart /Canvas自定义样式设置放大镜外框和数据线条的样式Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[2, 5]} frameStyle{{ stroke: #1890ff, lineWidth: 3px, }} lineStyle{{ stroke: #1890ff, lineWidth: 6px, }} / /Chart /Canvas添加辅助线在放大镜中显示阈值线或警戒线。records中 x 字段支持特殊值min起点和max终点Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[1, 6]} referenceLines{[ { // 绘制一条水平阈值线y100从放大镜左侧延伸到右侧 records: [ { date: min, value: 100 }, { date: max, value: 100 }, ], style: { stroke: #ff4d4f, lineWidth: 2px, lineDash: [4, 4], }, }, ]} / /Chart /Canvas添加多条参考线如平均值线和警戒线const avgValue data.reduce((sum, d) sum d.value, 0) / data.length; Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[1, 6]} referenceLines{[ { // 平均值线 records: [ { date: min, value: avgValue }, { date: max, value: avgValue }, ], style: { stroke: #1890ff, lineWidth: 2px, lineDash: [4, 4], }, }, { // 上限警戒线 records: [ { date: min, value: 120 }, { date: max, value: 120 }, ], style: { stroke: #ff4d4f, lineWidth: 2px, lineDash: [2, 2], }, }, ]} / /Chart /Canvas多条数据对比在放大镜中同时显示多条数据线。F2 中每个Line可携带独立的data、color放大镜会对所有系列分别截取聚焦区间并逐条重映射const data1 [{ x: 1, y: 10 }, { x: 2, y: 20 }, { x: 3, y: 15 }]; const data2 [{ x: 1, y: 8 }, { x: 2, y: 18 }, { x: 3, y: 12 }]; Canvas context{context} Chart Line data{data1} xx yy color#1890ff / Line data{data2} xx yy color#52c41a / Magnifier focusRange{[1, 2]} / /Chart /Canvas按分类字段如colortype分组的折线同样支持测试用例 magnifier.test.tsx 中构造了 A/B/C 三组各 10 个数据点的分组折线图focusRange{[0, 9]}时验证focusDataArray.length为 3、分组 key 依次为[A, B, C]即每个系列都会被独立聚焦与放大快照见 magnifier-test-tsx-magnifier-分组折线图-1-snap.png。固定位置放大镜将放大镜固定在图表的特定位置Canvas context{context} Chart data{data} Line xdate yvalue / Magnifier focusRange{[0, 4]} radius50px position{[200, 150]} / /Chart /Canvas动态数据中的放大镜仓库示例 magnifier-dynamic.jsx 演示了在动态追加数据的折线图中使用放大镜每次setState追加一个数据点后focusRange{[data.length - 9, data.length - 1]}始终聚焦最新 9 个点放大镜随数据滚动自动更新。测试用例 magnifier.test.tsx 通过对比动态更新前后polyline的points属性数量验证了放大镜在数据变化后重新映射的链路。源码原理放大镜内部如何工作1. 圆心与半径px2hd 与默认定位getPositionAndRadius()withMagnifier.tsx将this.props传入this.context.px2hd()这是一个将设计稿像素统一换算为当前画布物理像素的工具在 chart/index.tsx 中注入用于处理不同pixelRatio下的高清屏渲染。因此radius: 50px、position: [100px, 50px]这类带单位的字符串也会被正确换算为数值。2. 聚焦数据裁剪createFocusAttrController()withMagnifier.tsx中通过chart.getGeometrys()拿到所有几何图形取第一个 geometry作为放大镜数据源对应文档注意事项第 5 条多坐标系时默认使用第一个坐标系的图形以dataRecords[0].children.length作为该系列的数据点总数对focusRange做边界裁剪validStart max(0, min(start, len - 1))、validEnd min(len - 1, max(validStart, end))防止索引越界对每个数据系列group的children执行slice(validStart, validEnd 1)得到focusDataArray。3. 圆内坐标重映射放大镜的本质是在圆内重建一个局部坐标系withMagnifier.tsx新建ScaleController与AttrController属性映射范围被替换为x: [cx - r, cx r]、y: [cy - r, cy r]复用原 geometry 的attrController.optionsx/y 字段、颜色映射等。随后在mapping()withMagnifier.tsx中每个聚焦点的归一化坐标被换算为nx (normalized.x - 0.5) * 2、ny (normalized.y - 0.5) * 2当该点超出单位圆length 1时归一化到圆周上保证折线始终落在圆内px cx rx * r、py cy - ry * r折线的形状样式复用原 geometry 的_getShapeStyle()因此主图中shapesmooth等曲线形态在放大镜内保持一致测试用例 magnifier.test.tsx 验证了 smooth 曲线场景。4. 参考线的归一化替换辅助线不做极坐标变换而是直接线性插值withMagnifier.tsx特殊值min、max、median被replaceMap分别替换为归一化坐标0、1、0.5再映射到px cx - r normalized.x * 2 * r、py cy r - normalized.y * 2 * r。5. 视图层绘制与动画magnifierView.tsx 将整体包裹在一个group中并设置clip: { type: circle, style: { cx, cy, r } }圆形裁剪确保任何内容不超出放大镜圆框组内依次绘制外框circle、辅助线line、折线polyline。折线还带有 appear 动画以矩形裁剪从左向右展开quadraticOut、450ms动画参数见 magnifierView.tsx初次渲染时放大镜内的折线会呈现流畅的展开效果。常见问题放大镜不显示确保设置了focusRange属性这是必填项// 错误缺少 focusRange Magnifier radius60px / // 正确包含 focusRange Magnifier focusRange{[2, 5]} radius60px /从源码看focusRange缺失时createFocusAttrController()中[start, end]解构会得到undefined无法完成数据裁剪因此该属性没有默认值。放大镜位置不在预期位置检查position和offsetX/offsetY的值。注意 position 是放大镜中心点的位置// 如果希望放大镜在指定位置 Magnifier focusRange{[2, 5]} position{[400, 100]} /放大镜显示的数据不对检查focusRange的索引是否正确。索引从 0 开始表示数据在数组中的位置// 假设数据有 10 条 // focusRange{[0, 4]} 显示前 5 条索引 0-4 // focusRange{[5, 9]} 显示后 5 条索引 5-9 Magnifier focusRange{[0, 4]} /若范围超出数据长度源码会自动将索引裁剪到有效区间见上文聚焦数据裁剪但建议显式传入合理范围。辅助线不显示确保referenceLines中的records包含正确格式的数据并且数据字段与图表的 x/y 字段匹配// 正确使用特殊值 min 和 max 绘制水平阈值线 Magnifier focusRange{[1, 5]} referenceLines{[ { records: [ { date: min, value: 100 }, // 起点放大镜左侧y100 { date: max, value: 100 }, // 终点放大镜右侧y100 ], style: { stroke: #ff4d4f }, }, ]} /注意records中字段名必须与Line的x/y属性完全一致如上例 Line 使用xdate yvalue参考线记录就应包含date与value字段。样式不生效检查frameStyle和lineStyle中的属性名是否正确Magnifier focusRange{[2, 5]} frameStyle{{ stroke: #1890ff, // 正确 lineWidth: 3px, // 正确字符串类型 // strokeWidth: 3 // 错误 }} lineStyle{{ stroke: #52c41a, lineWidth: 6px, }} /注意事项focusRange 必填必须指定聚焦范围否则放大镜无法显示索引从 0 开始focusRange 的索引是基于数据数组的索引radius 支持两种格式可以是数字像素或带单位的字符串如50px两者都会经px2hd换算为实际渲染像素position 是中心点position 坐标是放大镜圆形的中心位置而非左上角多坐标系如果有多个坐标系放大镜默认使用第一个坐标系第一个 geometry的图形放大镜作用于 Line 等折线类几何图形createFocusAttrController()以 geometry 的dataRecords与attrController为基础重建局部坐标系因此它主要用于折线/面积类图形的局部细节呈现与 ScrollBar、Zoom 这类平移缩放组件配合使用可以在不离开主图上下文的情况下完成总览 细节的移动端数据探索。延伸阅读Magnifier 组件源码withMagnifier(magnifierView)的组装入口并从components统一导出见 components/index.tswithMagnifier.tsx放大镜全部逻辑定位、裁剪、重映射、参考线magnifierView.tsx圆形裁剪、外框、参考线与折线的视图层实现magnifier.test.tsx基础渲染、smooth 曲线、参考线、动态数据、分组折线与偏移量的完整测试官方文档组件 API 说明的权威来源交互与缩放相关组件可参考 ScrollBar 文档 与 Zoom。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐F2 放大镜Magnifier组件实战指南动态图表局部聚焦与数据放大F2 放大镜Magnifier组件实战指南动态图表局部聚焦与数据放大 放大镜Magnifier是 F2 移动端图表库中专为“动态、流式数据”设计的交互数据可视化前端F2 移动端图表放大镜 Magnifier 组件实战指南动态折线图聚焦最新数据F2 移动端图表放大镜 Magnifier 组件实战指南动态折线图聚焦最新数据 Magnifier 是 F2 移动端图表库内置的局部放大组件它通过一个圆形数据可视化前端G6 鱼眼放大镜Fisheye插件完全指南focuscontext 交互式局部放大实战G6 鱼眼放大镜Fisheye插件完全指南focuscontext 交互式局部放大实战 Fisheye 鱼眼放大镜是 G6 图可视化框架内置的交互插件数据可视化前端图表库上一篇如何快速掌握围棋AI分析LizzieYzy完整教程下一篇无需越狱也能深度定制iOSCowabunga Lite为你解锁iPhone个性化新玩法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考