The issue has been closed

g-svg umd script run error #4944

deyihu posted onGitHub

Checklist

npm test passes
benchmarks are included
commit message follows commit guidelines
documents are updated

Description of change

g-svg umd script run error

<script src="https://unpkg.com/@antv/g-svg@1.8.55/dist/index.umd.min.js"></script>

2023-05-05_141716

Issue Helper page error Issue Helper

2023-05-05_142047

the demo about SVGRenderer Not the expected result svg render the render result still canvas

2023-05-05_142546

UMD 格式 g-svg 的使用方式如下：

<script src="https://unpkg.com/@antv/g"></script>
<script src="https://unpkg.com/@antv/g-svg"></script>
<script src="https://unpkg.com/@antv/g2@5.0.5/dist/g2-lite.min.js"></script>

命名空间为 G.SVG：

const svgRenderer = new window.G.SVG.Renderer();

const { Chart } = window.G2;
const chart = new Chart({
  container: 'container',
  theme: 'classic',
  renderer: svgRenderer // 传入 SVG Renderer
});

在线示例：https://codepen.io/xiaoiver/pen/zYmpbNJ

什么情况下使用 g2-lite 版本？

正常情况下使用 g2 UMD 即可，里面已经把 @antv/g 和 @antv/g-canvas 打包进去了。但是当我们想使用非 Canvas 渲染器、g 提供的其他插件，就需要使用 g2-lite UMD，理由如下。

g-svg 这样的渲染器以及其他 g 的插件需要从 window.G 这样的命名空间下获取信息，而 g2 UMD 并不会暴露，这也是上面截图报错 undefined 的原因。

而 g2-lite UMD 版本会 external 掉 @antv/g 和 @antv/g-canvas，因此在使用时需要引入它俩的 UMD。

posted by xiaoiver almost 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

g-svg umd script run error #4944

Checklist

Description of change

什么情况下使用 g2-lite 版本？

Company

Community

Support

Connect