# @antv/f2 > Charts for mobile visualization. Latest version **5.14.0** (published 2025-11-10) · MIT license · 0 weekly downloads ## Install ```sh npm install @antv/f2 pnpm add @antv/f2 yarn add @antv/f2 bun add @antv/f2 ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.14.0 | | Published | 2025-11-10 | | First published | 2017-10-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 7997 | | Author | https://github.com/orgs/antvis/people | | Maintainers | lvisei, freestyle21, soundquiet, elaine.q.10, sturuby, sakuya223, serializedowen, xdzhao, yangzhanmei, wjgogogo, leungwensen, dori, iaaron, yard, simaq, dxq613, intchous, susan_ann, jinke.li, lzxue, army8735, atool, baizn, dengfuping, neoddish, jeffy2012, zqlu, afc163, pomelo-nwu, kopiluwaky, ccnuzindex, panyuqi, bubkoo, zengyue, kasmine, boyu.zlj, l1ud0ngq1, newbyvector, winniexing, chenluli, kn9117, xdddst, semious2020, esora, nadia_liu, bbsqq, mxz96102, openwayne, pearmini, pddpd, yiqianyao, zhanba, cxxxxxn, laixingui.lxg, susiwen8, yanxiong, zeyuwang, rainy25ghz, zhangjunjie-loki, flash1, yisi.wang, dreammy23, biupiubiupiu, basketduck, xuying1027, banxuan, bqxbqxbqx, duxinyue023, wang1212, leondt1, gaofuhong | | Keywords | antv, f2, chart, charts, mobile, visualization, data visualization, canvas, 2d draw, mobile visualization, interactive | ## Links - npm: https://www.npmjs.com/package/@antv/f2 - Repository: https://github.com/antvis/f2 - Homepage: https://f2.antv.vision/ - Issues: https://github.com/antvis/f2/issues - npm.io page: https://npm.io/package/@antv/f2 ## Dependencies (10) - [fecha](https://npm.io/package/fecha.md) ~4.2.0 - [tslib](https://npm.io/package/tslib.md) ^2.3.1 - [d3-cloud](https://npm.io/package/d3-cloud.md) ~1.2.5 - [gl-matrix](https://npm.io/package/gl-matrix.md) ^3.1.0 - [type-fest](https://npm.io/package/type-fest.md) ^3.5.0 - [@antv/util](https://npm.io/package/@antv/util.md) ^3.0.6 - [@antv/f-engine](https://npm.io/package/@antv/f-engine.md) ^1.3.1 - [@antv/f-lottie](https://npm.io/package/@antv/f-lottie.md) ^1.0.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.5 - [@antv/event-emitter](https://npm.io/package/@antv/event-emitter.md) ^0.1.2 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 5.14.0 (latest) — 2025-11-10 - 5.11.1-alpha.13 (next) — 2025-10-01 - 5.0.0-beta.12 (canary) — 2022-11-09 - 5.13.0 — 2025-10-17 - 5.12.0 — 2025-09-24 - 5.8.2-alpha.51 — 2025-09-22 - 5.8.2-alpha.49 — 2025-09-16 - 5.11.0 — 2025-08-22 - 5.8.2-alpha.37 — 2025-08-18 - 5.8.2-alpha.34 — 2025-08-11 - 5.8.2-alpha.31 — 2025-08-06 - 5.10.0 — 2025-07-21 - 5.8.2-alpha.18 — 2025-07-16 - 5.9.0 — 2025-06-30 - 5.8.2-alpha.10 — 2025-06-27 - … 340 more at https://npm.io/package/@antv/f2/versions ## README ![](https://user-images.githubusercontent.com/6628666/44565744-476f1880-a79c-11e8-802b-2477493162c7.png) [![](https://img.shields.io/travis/antvis/f2.svg)](https://travis-ci.org/antvis/f2) ![](https://img.shields.io/badge/language-javascript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/f2.svg)](https://www.npmjs.com/package/@antv/f2) [![NPM downloads](http://img.shields.io/npm/dm/@antv/f2.svg)](https://npmjs.org/package/@antv/f2) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/f2.svg)](http://isitmaintained.com/project/antvis/f2 'Percentage of issues still open') F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。[英文 README](./README.en-US.md)

> 在此衷心感谢[《The Grammar of Graphics》](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html)的作者 [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson)，为 F2 的图形语法提供了理论基础！ ## 安装 ```bash $ npm install @antv/f2 ``` ## 特性 ### 专注移动，体验优雅 - **轻量化呈现，自然反馈**：在设计上我们以人为本，追求自然简单易懂，有吸引力的表达效果，让用户在碎片化的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内容和操作有机融合，符合人的自然行为反应，让交互操作更自然。

- **轻巧流畅**：F2 一直致力于追求极致的性能，针对移动设备做了大量的优化，在支持丰富（50+）图表的基础上同时保持代码量的小巧（不带交互版本 gzip 压缩后 44k，带所有交互版本 56k），同时提供模块化的设计以支持动态加载，提供更优的大小。 - **多端异构**：在完美支持 H5 环境的同时，同时兼容 [Node.js](https://f2.antv.vision/zh/docs/tutorial/manual/node-env)，[支付宝小程序](https://github.com/antvis/my-f2)、[微信小程序](https://github.com/antvis/wx-f2)、[React Native](https://github.com/chenshuai2144/f2-demo)以及 [Weex 端](https://github.com/weex-plugins/weex-chart)的渲染，一份代码，多设备多环境渲染。

### 图表丰富，组件完备 与传统的图表库不同，抛弃了特图特做的封装思路，基于强大的图形语法理论，以数据驱动，通过图形语法的组合灵活构建各类图表，目前可绘制 50+ 图表类型（当然，还可以更多），覆盖各类场景在提供基础的图表可视化能力外，我们还提供了丰富图表功能组件，满足各种功能需求。

### 扩展灵活，创意无限 我们在提供最佳实践的同时，还为开发者提供了灵活的扩展机制，包括 Shape、动画以及交互的自定义能力，当然还有图表样式的个性化定制，满足各种个性化的图表要求。 ## 文档 - [使用教程](https://f2.antv.vision/zh/docs/tutorial/getting-started) - [API](https://f2.antv.vision/zh/docs/api) - [图表示例](https://f2.antv.vision/zh/examples) ## 快速开始 ```html ``` ```jsx // 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('mountNode').getContext('2d'); const { props } = ( ); const canvas = new Canvas(props); await canvas.render(); ``` 更多示例：[demos](https://f2.antv.vision/zh/examples)。 **手机扫码观看 demos** ## 本地开发 ```bash $ npm install # 先初始化 monorepo $ npm run bootstrap # 再跑测试用例 $ npm run test # 监听文件变化构建，并打开 demo 页面 $ npm run dev # 打开某一个具体的测试用例 $ npm run test-watch -- 'TestFileName' ``` ## 如何贡献 如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/f2/issues) 看看有没有类似的 bug 或者建议。 如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/f2/blob/master/CONTRIBUTING.md)。 ## 体验改进计划说明 F2 从 3.1.12（2018-06-20 发布）版本开始添加了`F2.track（true）`方法。 目前我们的体验改进计划已经完成，所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果它给你带来麻烦，我们深表歉意。 ## License [MIT license](./LICENSE). --- _Source: https://npm.io/package/@antv/f2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._