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」

把握阿裡巴巴前端新動向