F2 4.0 面向未来，全新升级

openwayne
1,025 阅读7分钟

导读

随着可视化应用越来越广，我们面临的数据也越来越庞大且复杂，我们对数据可视化的要求也越来越多，单一图表、单一形式、单一维度的数据表达已经远远不能满足我们的诉求，我们需要有更多元化、更丰富的形式，且能多维度表达的可视化引擎来满足我们的需求。 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 里内置一些常用的图表组件

未来

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

附

AntV 2021 品牌日的发布详情

AntV 项目链接

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

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

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

  • F2Native：github.com/antvis/F2Na… F2Native 是一个专注于客户端，开箱即用、高性能的可视化解决方案，完备的图形语法理论，满足你的各种需求，专业的移动设计指引为你带来最佳的移动端图表体验。
  • G6：github.com/antvis/g6 G6 是 AntV 旗下的图可视化与图分析引擎，G 来自于 Graphic、Graph ，意味着我们要基于图分析技术做图可视化；6 来自于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。
  • Graphin：github.com/antvis/grap… Graphin 是一个基于 G6 封装的关系可视分析工具，简单，高效，开箱即用，取自 Graph Insight，图的分析洞察。
  • X6：github.com/antvis/X6 X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
  • XFlow：github.com/antvis/XFlo… XFlow 是基于 X6 图编辑引擎、面向 React 技术栈用户的专业的图编辑应用级解决方案, 帮助您轻松开发复杂的图编辑应用。目前已经在蚂蚁大数据/人工智能场景中深度打磨验证。
  • L7：github.com/antvis/l7 L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。
  • L7Plot：github.com/antvis/l7pl… L7Plot 是基于 L7 封装的简单易用、图表丰富、支持定制的地理空间数据可视化地理图表库。
  • AVA：github.com/antvis/AVA AVA 是为了更简便的可视分析而生的智能可视化框架。
  • G：github.com/antvis/g（G 5.0 新官网 g-next.antv.vision） G 是 AntV 几个产品共同的底层 2D 渲染引擎，高效易用，专注于图形的渲染、拾取、事件以及动画机制，给上层 G2、F2、G6 提供统一的渲染机制。
  • Ant Design Charts：github.com/ant-design/…

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

  • ChartCube：chartcube.alipay.com ChartCube 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。
avatar
文章
阅读
粉丝