F2 快速上手指南：从安装到绘制第一个声明式移动端图表

数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载本指南基于 F2 官方快速上手文档完整讲解移动端图表库 F2 的安装、JSX 转换配置、Canvas 画布创建与声明式图表编写流程。读完本文你将能够在任意 Web 页面中独立完成一个可交互的 F2 柱状图并理解Canvas、Chart、Interval、Axis、Tooltip等核心组件的职责与关键属性。特性介绍F2antv/f2是面向移动端的数据可视化图表库自 4.0 起采用声明式方式编写图表带来了更直观的开发体验声明式声明式编程让图表代码更直观、简洁避免了复杂的命令式 API 调用。F2 采用 JSX 语法构建图表不仅上手方便还可以很方便地与 React、Vue 等前端框架结合参见 框架使用概览。组件化为了构建复杂的可视化图表组件是不可或缺的能力。F2 参考了 React 的设计模式内置了一套完善的组件体系可以简单方便地封装自己的组件。在源码层面从 组件统一出口 可以看出F2 内置了Interval、Line、Area、Point、Axis、Legend、Guide、Tooltip、Treemap、Sunburst、PieLabel、Gauge、Zoom、ScrollBar、Candlestick、Pictorial、Magnifier、ElementLink等一批开箱即用的图表组件同时每个组件都配套导出withXxx高阶组件与XxxView视图方便开发者自定义封装。安装通过 npm 安装在项目目录下执行npm install antv/f2 --save安装完成后即可在项目中以模块方式引入。当前仓库中antv/f2包版本为5.14.0见 packages/f2/package.json其依赖了antv/f-engine渲染引擎、antv/util、gl-matrix、d3-cloud词云等底层库。通过 CDN 引入如果不想使用构建工具可以直接通过 CDN 引入 UMD 构建产物script srchttps://unpkg.com/antv/f2/dist/index.min.js/script在 packages/f2/package.json 中可以看到unpkg字段指向dist/index.min.js即该包发布到 npm 后可直接用于 CDN 引用。配置 JSX 转换F2 使用 JSX 语法构建图表因此需要在运行前对 JSX 语法进行编译。Babel 和 TypeScript 都可以编译 JSX并且都存在Classic经典与Automatic自动两种编译模式完整说明见 配置 JSX Transform。注意如果项目本身已经是 React可以直接复用 React 的 JSX 运行时参考 如何在 React 中使用 F2。Babel 配置首先安装编译插件npm install --save-dev babel/plugin-transform-react-jsx然后在babel.config.json中按模式配置Classic 模式指定pragma为 F2 的jsx函数{ plugins: [ [ babel/plugin-transform-react-jsx, { pragma: jsx, pragmaFrag: Fragment } ] ] }Automatic 模式指定运行时与导入来源为antv/f2{ plugins: [ [ babel/plugin-transform-react-jsx, { runtime: automatic, importSource: antv/f2 } ] ] }TypeScript 配置在tsconfig.json中同样支持两种模式Classic 模式{ compilerOptions: { jsxFactory: jsx, jsxFragmentFactory: Fragment } }Automatic 模式{ compilerOptions: { jsx: react-jsx, jsxImportSource: antv/f2 } }Automatic 模式编译出的 JSX 代码会从antv/f2/jsx-runtime引入运行时函数。仓库中的 jsx-runtime.js 与 jsx-runtime.d.ts 均透出自antv/f-engine/jsx-runtime这正是 Automatic 模式下 JSX 运行时函数的真实来源保证了antv/f2可直接作为 JSX 导入源使用。一分钟上手下面用最简步骤绘制一张柱状图。1. 创建 canvas 标签在页面上放置一个canvas元素宽度与高度即图表画布尺寸canvas idmyChart width400 height260/canvas2. 编写代码// F2 对数据源格式的要求是 JSON 数组数组的每个元素是一个标准 JSON 对象 const data [ { genre: Sports, sold: 275 }, { genre: Strategy, sold: 115 }, { genre: Action, sold: 120 }, { genre: Shooter, sold: 350 }, { genre: Other, sold: 150 }, ]; // 获取 canvas context const context document.getElementById(myChart).getContext(2d); const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldgenre / Axis fieldsold / Interval xgenre ysold colorgenre / Tooltip / /Chart /Canvas ); const canvas new Canvas(props); canvas.render();完成上述两步之后保存文件并用浏览器打开一张柱状图就绘制成功了。整体结构一目了然Canvas负责画布渲染环境Chart装载数据Axis声明坐标轴Interval绘制柱状几何图形Tooltip提供数据提示交互。代码解析Canvas 画布组件Canvas是图表的根容器负责提供渲染环境其内部维护了渲染引擎实例antv/f-engine并执行render()方法完成绘制属性类型默认值说明contextCanvasRenderingContext2D-必填Canvas 2D 上下文pixelRationumberwindow.devicePixelRatio设备像素比用于高清屏适配widthnumber-画布宽度优先使用 canvas 元素的 widthheightnumber-画布高度优先使用 canvas 元素的 heightanimatebooleantrue是否开启动画childrenJSX.Element-通过 JSX 语法创建的 F2 组件节点如Chart /在实际使用中pixelRatio默认取window.devicePixelRatio因此在 Retina 等高清屏上也能保证图表清晰。Chart 图表组件Chart是图表的核心组件负责数据处理和坐标转换。从 Chart 源码 可以看到Chart在挂载时会初始化ScaleController度量控制器与CoordController坐标系控制器并在渲染时把data、coord、layout等上下文通过Children.cloneElement注入给每个子组件属性类型默认值说明dataData[]-必填数据源scaleScaleConfig-度量配置coordCoordConfig-坐标系配置childrenJSX.Element-通过 JSX 语法创建的 F2 组件节点如Interval /、Axis /等除此之外Chart实例还向开发者暴露了一批实用方法与状态能力均定义在 packages/f2/src/chart/index.tsxfilter(field, condition)按字段条件过滤图表数据对应内部_getRenderData实现highlight(field, condition)高亮符合条件的数据其余图形透明度降为 0.5setScale(field, option)/getScale(field)/getScales()动态设置与读取字段度量getPosition(record)把一条数据记录转换为画布上的坐标点getSnapRecords(point)获取某个画布位置附近命中的数据记录Tooltip 命中检测依赖于此on(eventName, listener)/off(...)绑定/解绑手势交互事件。Interval 柱状图组件Interval用于绘制柱状图是最常用的几何标记Geometry组件之一属性类型默认值说明xstring-必填x 轴字段名ystring-必填y 轴字段名colorstring \| Function-颜色字段或颜色映射函数Axis 坐标轴组件Axis用于配置坐标轴。从 withAxis.tsx 源码 可以看出Axis不仅负责渲染坐标轴线、刻度与标签还会在构造时把自身的度量配置type、tickCount、range、mask、formatter、min、max、nice、ticks通过chart.setScale(field, scaleOption)注册到Chart的度量控制器中——这就是在Axis上配置格式化函数、刻度个数等参数能生效的底层原理属性类型默认值说明fieldstring-必填字段名positionstring-坐标轴位置top、bottom、left、right此外Axis还支持type度量类型如cat分类、linear线性、timeCat时间分类、tickCount刻度数量、formatter刻度文本格式化函数、min/max数值范围、nice是否自动取整等度量相关属性。Tooltip 提示框组件Tooltip用于显示数据提示信息。当用户在图表上触摸/悬停时会弹出提示框展示命中的数据详情其命中检测正是通过Chart的getSnapRecords与几何组件的快照机制完成的。理解组件组合与更多组件一个完整的 F2 图表由多个组件声明式组合而成典型层级为Canvas (画布容器) └── Chart (图表核心) ├── Axis (坐标轴) ├── Geometry (几何标记Interval / Line / Area / Point ...) ├── Tooltip (提示框) ├── Legend (图例) └── Guide (辅助标记)几何标记的类型决定了图表类型Interval对应柱状图Line对应折线图Area对应面积图Point对应散点图。更多组件与图表的详细结构、核心术语坐标轴、图例、几何标记、图形属性、坐标系、提示信息、辅助标记可参考 核心概念。更多示例更多可运行的示例柱状图、折线图、饼图、雷达图、漏斗图、关系图、动效案例等请查看仓库 site/examples 目录每个示例都包含可复制的*.jsx代码、配套的meta.json配置以及中英文说明文档。下一步了解 核心概念与图表结构学习 图表语法Graphic Grammar查看 Chart 组件 API了解 如何在 React、Vue、小程序、Node.js 等框架中使用 F2赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐Meta-Llama-3.1-8B-Instruct_rai_1.7.1_npu_4K震撼发布AMD Ryzen AI平台4K上下文大模型深度解析Meta Llama 3.1 8B Instruct_rai_1.7.1_npu_4K震撼发布AMD Ryzen AI平台4K上下文大模型深度解析 Meta5分钟快速上手Code2flow从安装到第一个调用图5分钟快速上手Code2flow从安装到第一个调用图 想要快速理解复杂的代码结构Code2flow是你的终极解决方案这款强大的代码可视化工具能够自动生成调开发工具CLI静态分析5分钟快速上手Apache DevLake从安装到第一个仪表板5分钟快速上手Apache DevLake从安装到第一个仪表板 Apache DevLake是一个开源的数据湖工具专门用于收集、存储、分析和可视化大量开发数后端运维数据分析开发工具上一篇Mac终极指南5分钟快速导出微信聊天记录的完整解决方案下一篇免费AMD Ryzen调试工具SMUDebugTool终极硬件掌控指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考