F2Native 1.0 新的起点-阿里云开发者社区

作者 | 索丘

F2，源于 Fast & Flexible 两个单词首字母，是专为移动端定制、开箱即用的可视化解决方案。

更好的阅读体验请点击阅读原文至语雀文档。

F2Native，开箱即用的跨平台高性能可视化解决方案，国民级应用支付宝上的图表组件，在经历3代架构的升级和大量的优化后，终于正式开源 🎉🎉🎉！！！。完美支持 Android、iOS 平台。完备的图形语法理论，满足你的各种可视化需求。

首先，欢迎大家来给我们的 GitHub 仓库加星和收藏，F2Native 官网：https://f2native.antv.vision/ 同样欢迎大家收藏和转发。

缘起

F2 是面向移动端的数据可视化解决方案，目前 F2 已经很好的满足了 H5 和小程序的数据可视化需求，但是在蚂蚁集团的整个业务场景中还存在着大量 Native 平台的图形需求，这些需求是 F2 覆盖不到的，如何系统化地解决这些问题，一直是我们困扰的问题，因此我们需要有一套系统化的方案来解决这些问题。

F2Native 的演进史

1.0 时代 - 纯 Native 图表

稍微回溯下历史，F2Native 项目最早起源于支付宝财富业务线，财富业务有大量金融相关的可视化需求，其中最典型的场景是股票的分时趋势图及 K 线蜡烛图。因为我们没有系统化的方案来解决这些场景，所以当时主要的解决方案是针对每种图表类型实现单独的计算逻辑封装，底层的渲染能力直接采用原生系统提供的 Canvas，特图特做，快速迭代来满足业务的需求。

在业务需求的背景下，我们沉淀了一套金融领域的可视化图表：

虽然基本需求能够得到满足，但是问题也随之而来。在 Android 和 iOS 平台是不同的计算逻辑和绘制策略，最终的表现始终有一些差异；研发效能上，也需要同时投入双倍工作量来实现一个功能。为了解决这些问题，我们开启了 2.0 时代的升级。

2.0 时代 - 跨平台

在 1.0 时代我们积累了很多图表类型的实践经验，不同的图表类型在计算逻辑和绘制策略上也存在很多共性。在 2.0 的版本中我们把这部分共性的计算逻辑用 C++ 重新实现，极大的降低了双端分别实现带来的差异性。同时底层的渲染能力也由双端系统的 Canvas 调整为基于 OpenGL 的指令调用，在绘制策略也实现了双端的统一。

但是随着集团整体业务的发展，不断有其他业务线的同学过来咨询现有的图表组件能否支持他们的需求。这其中，一部分是我们没有实现过的类型，一部分是在现有的基础上做一些调整，但人力有限，不可能每次都针对具体的需求不断进行资源投入。大家越来越迫切的需要一套完整的图表解决方案。

3.0 时代 - 可视化图表解决方案

因为 F2 在业务中已经有大量的实践和经验，图形语法也在一线开发人员中得到越来越多的关注和认可，但是这些实践和经验却无法触达到 Native 场景，我们希望在 Native 场景也能享受图形语法带来的便利。在充分探讨用 C++ 重新实现图形语法的可能性，并经过半年多研发和业务场景验证后，我们正式推出全新的 Native 端数据可视化解决方案- F2Native。

F2Native

F2Native 结合了原生系统的高性能渲染能力，完美支持 Android、iOS 平台，同时保持和 F2 一致的图形语法实现及 AntV 可视化设计准则，为你带来开箱即用的可视化解决方案，满足你的各种可视化需求。

利用图形语法的灵活性，不再采用特图特做的方案之后，图表的表达完全由业务方自行完成图形语法的组合实现，带来了丰富和灵活的图表类型。

跨平台的 2D 绘制引擎

由于原生系统没有一个标准统一的多端 Canvas 解决方案，为了保持跨平台表达的一致性，F2Native 对接了 Alibaba 开源的 GCanvas 跨端渲染引擎。GCanvas 基于 OpenGL 实现了完整的 Canvas 能力，能够同时运行在 Android/iOS 操作系统上，并且已在支付宝等应用上广泛使用。

同时 F2Native 底层实现可插拔的设计，能够灵活的对接其他的引擎。对于业界其他的解决方案可实现无缝切换。

完善的图形语法理论

同 F2 一样，我们抛弃了传统的特图特做的封装思路。基于强大的图形语法理论，以数据驱动，通过图形语法的组合灵活构建各类图表，当前可绘制以及正在实现的图表类型有 50+ 种，覆盖各类场景(当然我们也在持续完善中)。更多细节可参考官网图表示例。

继续前进的 F2

无障碍的 F2

支付宝作为一款有着亿级用户数的APP，如何让视障人士也能更好地获取平台提供的信息，享受技术带来的便利一直是我们追求的目标。在F2 3.8.0以后，我们新增了图表的无障碍的处理，可以在代码中非常方便地开启和使用：

// 示例代码
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio,
  aria: true   // 开启无障碍文本生成
});

开启后会生成：

这种可被读屏设备阅读的表述文案。

示例参考：https://f2.antv.vision/zh/examples/column/basic#aria

方便的横竖屏切换

你是否遇到过因为数据量太大从而导致图表过密进而影响阅读的场景，然而当你想横屏展示的时候又受限于外部容器无法横屏而导致无法实现呢，F2 带来了全新的横屏解决方案，纯依赖 css3 的 transform 来实现不受容器限制的横屏解决方案：

示例参考，横屏图：

https://f2.antv.vision/zh/examples/creative/case/#landscape

可拓展的渲染引擎

在移动端的大部分场景，Canvas 往往都是最优的选择，因为在小屏幕下 Canvas 的性能表现是最优的，而 F2 底层的绘制用的也是 Canvas，然而随着场景的丰富和业务的复杂，我们发现在一些特殊场景还是需要有其他的渲染引擎支持，比如 SVG 等，所以在新版 F2 中，我们独立了底层的渲染引擎，并可注册添加和使用，也可自行实现属于自己特有的渲染引擎：

以 SVG 为例，只需要简单的注册便可使用：

import F2 from '@antv/f2';
import * as SVGEngine from 'f2-svg-engine';
// 引入并注册 svg 渲染引擎
F2.G.registerEngine('svg', SVGEngine);

const chart = new F2.Chart({
  el: container,
  // 指定渲染引擎
  renderer: 'svg',
  ...
});

完成之后 F2 就会通过指定的渲染引擎进行绘制和渲染：

关于未来

首先 F2Native 还是个新生儿，还有很多场景等着我们去覆盖和实现，我们会进一步地把这些场景覆盖掉，让我们在业务中能更方便地去使用，我们也会尽全力去保证 F2Native 的进一步成长。

F2 作为移动端可视化解决方案的先驱，会继续深耕在移动端数据可视化领域，后面我们会继续往 low code 方向做进一步尝试和探索，进一步提升业务研发效率。第二，我们会尝试建立一套 F2 的组件化方案，能让你方便和快捷的开发 F2 组件，从而能为业务做进一步的定制和扩展。

附

AntV 2020 品牌日的发布详情

利业·立业 - AntV 与业务的故事：
https://www.yuque.com/antv/blog/2020story
技术专文
- G2Plot 2.0 全新来袭
  https://www.yuque.com/antv/blog/2020g2
- F2Native 1.0 新的起点
  https://www.yuque.com/antv/blog/2020f2
- G6 栈：图可视分析如此简单
  https://www.yuque.com/antv/blog/2020g6
- X6 1.0 抱歉来晚
  https://www.yuque.com/antv/blog/2020x6
- L7 2.3 业务为本完善生态
  https://www.yuque.com/antv/blog/2020l7
- AVA 1.0 你的图表参谋
  https://www.yuque.com/antv/blog/2020ava
设计专文
- 2020，贴地飞行的 AntV 设计：
  https://www.yuque.com/antv/blog/2020design
解决方案专文
- AntV 图可视分析解决方案，来啦：
  https://www.yuque.com/antv/g6/solution

AntV 项目链接

欢迎关注我们的 GitHub 项目，点亮 star 了解我们的实时动态，期待 PR：

AntV 官网：https://antv.vision/

G2：https://github.com/antvis/g2
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

G2Plot：https://github.com/antvis/g2plot
G2Plot 的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。

F2：https://github.com/antvis/f2
F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

F2Native：https://github.com/antvis/F2Native
F2Native 是一个专注于客户端，开箱即用、高性能的可视化解决方案，完备的图形语法理论，满足你的各种需求，专业的移动设计指引为你带来最佳的移动端图表体验。

G6：https://github.com/antvis/g6
G6 是 AntV 旗下的图可视化与图分析引擎，G 来自于 Graphic、Graph ，意味着我们要基于图分析技术做图可视化；6 来自于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。

Graphin：https://github.com/antvis/graphin
Graphin 是一个基于 G6 封装的关系可视分析工具，简单，高效，开箱即用，取自 Graph Insight，图的分析洞察。

X6：https://github.com/antvis/X6
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。

L7：https://github.com/antvis/l7
L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。

AVA：https://github.com/antvis/AVA
AVA 是为了更简便的可视分析而生的智能可视化框架。

G：https://github.com/antvis/g
G 是 AntV 几个产品共同的底层 2D 渲染引擎，高效易用，专注于图形的渲染、拾取、事件以及动画机制，给上层 G2、F2、G6 提供统一的渲染机制。

ChartCube：https://chartcube.alipay.com
ChartCube 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。

关注「Alibaba F2E」
把握阿里巴巴前端新动向

F2Native 1.0 新的起点

缘起