Skip to content

feat: support custom renderer and plugins#4113

Merged
pearmini merged 3 commits intov5from
feat/custom-render
Sep 8, 2022
Merged

feat: support custom renderer and plugins#4113
pearmini merged 3 commits intov5from
feat/custom-render

Conversation

@pepper-nice
Copy link
Copy Markdown
Contributor

@pepper-nice pepper-nice commented Aug 29, 2022

Usage

import { Chart } from '@antv/g2';
import { Renderer } from '@antv/g-svg';
import { Plugin } from '@antv/g-plugin-rough-canvas-renderer';

const chart = new Chart({
  width: 300,
  height: 150,
  container: 'chart',
  renderer: new Renderer(), // Use SVG renderer.
  plugins: [new Plugin()], // Register rough plugin.
});

chart.interval()...
chart.render();

List

  • source
  • test
  • docs

@pepper-nice pepper-nice changed the title [WIP feat: support custom renderer and plugins [WIP] feat: support custom renderer and plugins Aug 29, 2022
@xiaoiver
Copy link
Copy Markdown
Contributor

xiaoiver commented Aug 30, 2022

UMD 打包方式修改

打包 UMD 时将 @antv/g@antv/g-canvas 从 G2 中 external 掉:
https://rollupjs.org/guide/en/#external
https://rollupjs.org/guide/en/#outputglobals

此种情况下使用方式会变成:

<script src="unpkg/@antv/g" type="application/javascript"></script>
<script src="unpkg/@antv/g-canvas" type="application/javascript"></script>
<script src="unpkg/@antv/g-plugin-xxx" type="application/javascript"></script>

<script src="unpkg/@antv/g2" type="application/javascript"></script>
<script src="unpkg/@antv/g6" type="application/javascript"></script>

.genjirc 中引入核心、渲染器和插件的 UMD:

// UMD 使用方式
const chart = new G2.Chart({
  renderer: new G.Canvas2D.Renderer(),
  plugins: [new G.RoughCanvasRenderer.Plugin()],
});

展示效果问题

发现以下展示问题。由于 Rough.js 提供的 Canvas / SVG 展示效果也有不一致情况,需要进一步验证。

下图为 @antv/g-canvas + @antv/g-plugin-rough-canvas-renderer 效果。线颜色过深:

截屏2022-08-30 下午3 22 41

下图为 @antv/g-svg + @antv/g-plugin-rough-svg-renderer 效果。线倒是正常了,但图例展示不出来:

截屏2022-08-30 下午3 24 31

去掉手绘插件,@antv/g-svg 图例展示正常:

截屏2022-08-30 下午3 26 03

手绘风格字体

另外手绘风格下,字体是很影响观感的。如果需要加载相应字体,可以使用第三方加载器,例如:https://github.com/typekit/webfontloader

使用示例:https://g-next.antv.vision/zh/examples/plugins#rough-d3-barchart

截屏2022-08-30 下午3 34 35

加载完成后,G2 可能需要提供坐标轴、图例字体的配置方式。

@pepper-nice pepper-nice changed the title [WIP] feat: support custom renderer and plugins feat: support custom renderer and plugins Aug 30, 2022
@pearmini
Copy link
Copy Markdown
Member

讨论结果:g2 会打两种 umd,一种是包含 g 的,叫 g2.min.js;一种是不包含 g 的,叫 g2-lite.min.js。开箱即用的情况使用前者,在需要插件的情况下使用后者。

@xiaoiver
Copy link
Copy Markdown
Contributor

xiaoiver commented Aug 31, 2022

讨论结果:g2 会打两种 umd,一种是包含 g 的,叫 g2.min.js;一种是不包含 g 的,叫 g2-lite.min.js。开箱即用的情况使用前者,在需要插件的情况下使用后者。

我会用俩 rollup 配置生成 UMD,一个就是之前的 g.min.js,另一个 external 掉 @antv/g@antv/g-canvas

但有一个小小的问题。
在 genji 中使用 lite 版时,需要通过如下方式引入 @antv/g @antv/g-canvas 以及插件。但问题是上述 UMD 文件名都是 index.umd.min.js,genji 还不支持同名文件即使路径不同,所以目前得手动修改下文件名:

// .genjirc

// 理想的写法,这样能始终引用最新的依赖
"scripts": [
  "node_modules/@antv/g/dist/index.umd.min.js",
  "node_modules/@antv/g-canvas/dist/index.umd.min.js",
  "dist/g2-lite.min.js"
]

// 目前的临时写法
"scripts": [
  "docs/assets/g.umd.min.js",
  "docs/assets/g-canvas.umd.min.js",
  "dist/g2-lite.min.js"
]

@hustcc
Copy link
Copy Markdown
Member

hustcc commented Sep 8, 2022

@pepper-nice

  • 有一个空文件:runtime/canvas.ts,是否删除?
  • umd 文件放 git 中不是很友好!

@pepper-nice pepper-nice force-pushed the feat/custom-render branch 2 times, most recently from c769a14 to 62d8062 Compare September 8, 2022 11:31
Copy link
Copy Markdown
Member

@pearmini pearmini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

去掉一些不需要的修改就好

@pearmini
Copy link
Copy Markdown
Member

pearmini commented Sep 8, 2022

还需要处理一下冲突

@pearmini
Copy link
Copy Markdown
Member

pearmini commented Sep 8, 2022

案例后续再加,等 genji-notebook 升级

@pearmini pearmini merged commit d82d723 into v5 Sep 8, 2022
@pearmini pearmini deleted the feat/custom-render branch September 8, 2022 12:29
hustcc pushed a commit that referenced this pull request May 16, 2023
* feat: support custom renderer and plugins

* chore: add an independent rollup config for g-lite UMD output

* feat: add renderer docs (close: #4104)

Co-authored-by: yuqi.pyq <[email protected]>
hustcc pushed a commit that referenced this pull request May 16, 2023
* feat: support custom renderer and plugins

* chore: add an independent rollup config for g-lite UMD output

* feat: add renderer docs (close: #4104)

Co-authored-by: yuqi.pyq <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants