F2 4.0：面向未来，全新升级

导读

随着可视化应用越来越广，我们面临的数据也越来越庞大且复杂，我们对数据可视化的要求也越来越多，单一图表、单一形式、单一维度的数据表达已经远远不能满足我们的诉求，我们需要有更多元化、更丰富的形式，且能多维度表达的可视化引擎来满足我们的需求。

F2 是面向移动端的数据可视化引擎，我们致力于帮用户更好的认识数据和理解数据背后的故事，F2 4.0 我们面向未来多元化的诉求对图形、组件、动画进行了全新的设计和升级，并带来了更方便的扩展能力和丰富的叙事能力，能轻松地实现丰富且多元的可视化场景

可视化叙事

可视化叙事是一种非常优秀的数据表达方式，而叙事中的动画能非常好的引导用户关注点，并传达数据信息，动画的过渡和衔接也能很好地帮用户实现数据维度的切换，F2 4.0 我们全面升级了动画叙事能力。

时序动态图

时序动态排序柱状图、折线图、气泡图都是非常经典和常见的叙事形式，F2 4.0 里面已经全面支持，并且可以开箱即用，非常简单

简单看一下动态排序柱状图的实现代码，非常简单，就是 Timeline 下面柱状图的连续变化，F2 内部会自动处理变化的图源并执行变化动画。

<Canvas>
  <Timeline delay={10}>
    {Object.keys(data).map((year) => {
      return (
        <Chart
          data={sort(data[year])}
          coord={{
            transposed: true,
          }}
          >
          <Year year={year} />
          <Axis field="country" />
          <Axis field="income" />
          <Interval x="country" y="income" color="country" />
        </Chart>
      );
    })}
  </Timeline>
</Canvas>

跨系列变化

跨系列变化是一种场景的多维视角切换场景，他能帮我们多维度切换数据视角，更全面地理解数据，在 F2 4.0 中也能很轻松地实现。

声明式

F2 4.0 开始，我们将全面拥抱声明式编程，声明式可以让你的代码更清晰和直观，避免了复杂的 API 调用，而且当数据变化时，F2 能高效地更新并渲染图表，在代码实现上，我们使用大家熟悉的 JSX 声明式语法，能让你非常方便地和 React 等框架结合，零门槛上手和使用

<Canvas>
  <Chart data={data}>
    <Axis field="country" />
    <Axis field="income" />
    <Interval x="country" y="income" color="country" />
  </Chart>
</Canvas>

组件化

组件是 F2 4.0 里一项很重要的更新，组件可以封装相对复杂的逻辑，并构造相应的UI, 组件也能让代码方便的组合与复用，在 4.0 里面我们借鉴了 React 优秀的组件设计模式，重构了 F2 的组件模式，让组件定义和使用都像 React 一样方便

import { Component } from '@antv/f2';
class Hello extends Component {
  constructor(props) {
    super(props);
  }
  willMount() {}
  didMount() {}
  shouldUpdate() {}
  willReceiveProps(props) {}
  willUpdate() {}
  didUpdate() {}
  render() {}
  didUnmount() {}
}

图形能力

在 F2 4.0 中，我们将图形绘制能力更进一步地开放出来，让你更方便和自由地构建自己的图表UI， 并且借助声明式语法和组件，可以让你像构建DOM一样构建自己的UI界面

<group>
  <rect attrs={ ... } />
  <circle attrs={ ... } />
  <line attrs={ ... } />
  <polygon attrs={ ... } />
  <arc attrs={ ... } />
  <sector attrs={ ... } />
  <text attrs={ ... } />
</group>

动画能力

动画能力也是 F2 4.0 中一项很重要的更新，F2 4.0 对动画做了更深层次的抽象与定义，将动画拆解成appear(出现)、update(变化)、leave(消失) 这3个完整且独立的生命周期阶段，并通过 Virtual DOM 自动识别图形的生命周期阶段，并执行相应动画，可以让你非常方便的声明和定义动画。

Timeline

Timeline 是 F2 4.0 中一个很有用的组件，他能让多个组件实现连续的播放。有了 Timeline 后，你可以任意组合多个组件，并让他们连续播放，比如前面柱状图和 Treemap 的跨系列变化，就是通过 Timeline 组合柱状图和 Treemap 的结果

<Canvas context={context} pixelRatio={2}>
  <Timeline delay={200} loop>
    <Chart data={data}>
      ...
    </Chart>
    <Treemap />
  </Timeline>
</Canvas>

其他

除了上面的能力升级外，我们还在 4.0 里内置一些常用的图表组件

旭日图 火焰图 极坐标下treemap

未来

第一，F2 会继续完善 4.0 新增的能力，并继续加强可视化叙事能力，尤其是跨系列变化中的形变能力，相信不久的将来就可以和大家见面；
第二，在现有能力之上，F2 会继续探索和深入新的可视化场景和形式，让数据洞察变得更加直观和快捷；
第三，F2 会和 F 系列一起积极地往 IOT、VR、AR 等新兴领域做更深入的探索和准备；

最后，欢迎大家关注并 star 我们的 GitHub 仓库~

附录

AntV 2021 品牌日的发布详情

• 格物·革悟 - AntV 2021 年度发布
• F 系列：见微知著，扬帆起航
• 御术和你聊聊AntV的那些事
• 技术专文
  • S2 1.0：这个表格 「不简单」
  • F6 1.0：小屏玩转图可视化
  • XFlow 1.0：专业的图编辑应用解决方案
  • G2 栈：潜心深造，统计图表
  • G6 栈：格物图新悟
  • L7 栈：一站式地理分析应用解决方案
  • F2 4.0：面向未来，全新升级
  • G 5.0：因为专注所以专业
  • X6：深度打磨，日臻完善
  • Ant Design Charts：AntV 的 React 图表库
  • AVA 2.0：洞见，新开篇
• 设计专文
  • 2021 AntV Design
• 学海无涯
  • 《可视化入门：从 0 到 1 开发一个图表库》

AntV 开源项目链接

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

• AntV 官网：https://antv.vision/
• G2：https://github.com/antvis/g2
  G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
• G2Plot：https://github.com/antvis/g2plot
  G2Plot 的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。
• S2：https://github.com/antvis/s2
  S2 是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。
• F2：https://github.com/antvis/f2（F2 4.0 新官网 http://f2-next.antv.vision）
  F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。
• F6：https://github.com/antvis/f6

F6 是一个简单、易用、完备的移动端图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于 使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

• 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 图、流程图等应用。
• XFlow：https://github.com/antvis/XFlow
  X6 是基于 X6 图编辑引擎、面向 React 技术栈用户的专业的图编辑应用级解决方案, 帮助您轻松开发复杂的图编辑应用。目前已经在蚂蚁大数据/人工智能场景中深度打磨验证。
• L7：https://github.com/antvis/l7
  L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。
• L7Plot：https://github.com/antvis/l7plot
  L7Plot 是基于 L7 封装的简单易用、图表丰富、支持定制的地理空间数据可视化地理图表库。
• G：https://github.com/antvis/g（G 5.0 新官网 http://g-next.antv.vision）
  G 是 AntV 几个产品共同的底层 2D 渲染引擎，高效易用，专注于图形的渲染、拾取、事件以及动画机制，给上层 G2、F2、G6 提供统一的渲染机制。
• Ant Design Charts：https://github.com/ant-design/ant-design-charts

Ant Design Charts 是集齐 AntV 各技术栈的 React 版图表类库，包含统计图表、关系图表以及地理可视化 图表。

• AVA：https://github.com/antvis/AVA
  AVA 是为了更简便的可视分析而生的智能可视化框架。
• ChartCube：https://chartcube.alipay.com
  ChartCube 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。