11

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

 4 years ago
source link: https://my.oschina.net/u/4902095/blog/4838019
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

经常有同学问 G2、G2Plot、Ant Design Charts 什么关系，我该选择哪个 ？下面我们就来介绍下三者和他们直接的关系。

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

up-320604a27eaaf9d967d5e2e86d12084358b.png

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

up-3da433ddab0b6784365654e446489ba9217.png

G2Plot

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

up-f755ea28d82d52d73a363480cff56e20044.png

Ant Design Charts

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

up-2f7cc2796a7ba0585fc85c9129a307b97d2.png

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

  • 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';

up-eff9889f9fb5b3976ee347dc159803c7239.png

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK