不要再问G2、G2Plot、Ant Design Charts什么关系了

avatar
数据可视化 @蚂蚁集团

经常有同学问 G2G2PlotAnt Design Charts 什么关系,我该选择哪个 ?下面我们就来介绍下三者和他们直接的关系。

下图来自于 AntV 官网,从该图你也许已经看明白了一切。

G2

G2 一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表,强大的交互语法,助力可视分析,让图表栩栩如生。

G2Plot

G2Plot 是在 G2 基础上,屏蔽复杂概念的前提下,保留 G2 强大图形能力,通过 Adaptor 将 G2 能力转换成 config 的形势透出,封装出业务上常用的统计图表库,帮助开发者以最小成本绘制高质量统计图表,涵盖 25+ 常用的统计图表。

Ant Design Charts

Ant Design Charts 基于 G2Plot,弥补 Ant Design 组件库在统计图表上的缺失,作为 Ant Design 的官方图表组件解决方案。在图表能力上,和 G2Plot 保持一致,不修改技术概念,不修改配置结构。不仅降低这个模块的维护成本,同时降低开发者使用的开发理解成本。

总结

重点往往在最最后,聊了三分钟,简单做个总结。

  • G2 作为底层依赖,使用了图形语法,上手成本相对较高,功能强大。

  • G2Plot 全面依赖 G2,G2Plot 层仅仅是基于 G2 强大的图形、交互、事件、动画能力,一图一做的扩展不同的常见业务图表,开箱即用、易于配置。

  • Ant Design Charts 是 G2Plot 的 React 版本,基于 React 封装了 G2Plot,无需感知

    destroy()、update()

    等函数,只需关系 data 和 config,功能和 G2Plot 保持一致,回到第一张图,Ant Design Charts 不局限于 G2Plot,目前已经在 G6 的基础封装了部分流程图、组织架构图等,后续还会接入 L7 (地理可视化) 等图表库。

  • G2Plot、Ant Design Charts 都有透出 G2 ,可以简单理解成能力上是对齐的。

    import { G2 } from '@antv/g2plot'; import { G2 } from '@ant-design/charts';

G2 到 Ant Design Charts,我们只有一个目的:降低开发入门门槛,如何选择取决于你对各图表库的理解程度,新手建议使用最简单的 Ant Design Charts,大佬请自便。