自定义扩展

阅读时间约 2 分钟

自定义图表开发

G2Plot 内置的是业务中使用量占比超过 90% 的常规统计图表,而对于业务产品来说,定制不可避免,这个时候,用户将面临两难:

  • 使用 G2 去开发
  • 建议 G2Plot 增加图表
  • 使用其他图表库、或者自研

而我们作为 G2Plot 开发团队,也陷入一些问题:

  1. 这个图表通用吗?是不是太跟随业务了?能直接内置进来吗?
  2. 开发者基于 G2 开发了,能开源给其他需要的用户使用吗?

基于这些问题,我们将 G2Plot 基于 G2 开发图表的 Adaptor 模式直接开放出来,业务同学可以基于这一个模式去基于 G2 封装定制图表,如果需要给其他业务复用,直接发 NPM 包,并且在 G2Plot 的模式上去使用。举个简单的例子:

// 引入自定义扩展图表入口
import { P } from '@antv/g2plot';
// 引入自己开发的扩展图表(二维码)
import { adaptor, defaultOptions } from 'g2plot-qrcode';

const plot = new P(
  'container',
  {
    data: 'Hello, G2Plot v2!', // 二维码内容
  },
  adaptor,
  defaultOptions
);

plot.render();

以这样的开放扩展开发的方式,既保证业务技术栈的统一,又保证 G2Plot 内置图表的足够通用,也可以无限透出 G2 的能力。

如何开发自定义图表

这个章节,将介绍如何开发一个自定义图表。具体的实例在这里:

主要的流程分成为以下几个步骤:

  1. 定义图表默认配置
  2. 自定义 adaptor 实现配置到 G2 API 的转换
  3. 在 G2Plot 上使用,或者发 NPM 包复用

收录自定义图表

基于 G2Plot 的开放开发能力,定制的第三方图表,弥补 G2Plot 官方通用图表收录标准和数量的限制。插件来源于社区,用于业务生产环境请谨慎筛选。

项目名演示描述版本
G2Plot-QRCode前往Draw a QRCode with G2Plot.npm
G2Plot-Column前往Customize Column with G2Plot.npm
G2Plot-Lollipop前往Welcome to G2Plot-Lollipop 👋npm
G2Plot-Calendar前往A component like GitHub-contribution-calendar with G2Plot 📅npm

技术栈封装

针对不同技术栈(React、Vue、Angular)的 G2Plot 封装。插件来源于社区,用于业务生产环境请谨慎筛选。

项目名技术栈描述版本
@ant-design/chartsReactA React Chart Library based on @antvis/G2Plot.npm
React-G2PlotReactUnofficial react component wrapper for @antvis/G2Plot.npm
PyG2PlotPython@AntV/G2Plot 的 Python3 封装pypi
@opd/g2plot-reactReactG2Plot for React.npm
@opd/g2plot-vueVueG2Plot for Vue, both v2 and v3.npm
ngx-g2plotAngularG2Plot for Angular 11.npm