集成 g2plot 的图表功能（Integrated g2plot chart）

[zhengxs2018]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

我准备做一个可视化的大屏设计器，类似 BI 项目。打算使用 g 作为底层画板，并且使用 g2plot 图表。

I'm going to make a visual large-screen designer, similar to the BI project. I plan to use g as the underlying drawing board and use g2plot charts.

我希望能有一个 @antv/g-plugin-g2plot 的官方插件

I wish there was an official plugin for @antv/g-plugin-g2plot

我使用 HTM g2plot 做的，但需要解决的问题还是挺多的

I use HTM g2plot, but there are many problems.

import { Bar } from "@antv/g2plot";
import { HTML } from "@antv/g";

const width = 200
const height = 200

const chartDom = document.createElement("div");

chartDom.style.width = `${width}px`;
chartDom.style.height = `${height}px`;

const bar = new Bar(chartDom, {
  ...
  data: data,
  autoFit: true, // 
});

const html = new HTML({
  style: {
    width,
    height,
    innerHTML: chartDom,
  },
});

canvas.appendChild(html);

bar.render();

What does the proposed API look like?

// 1. 从 @antv/g-plugin-g2plot 导入 Bar 而不是 @antv/g2plot
import { Plugin as G2plotPlugin, Bar } from '@antv/g-plugin-g2plot'

// 2. 注册组件
renderer.registerPlugins(new G2plotPlugin());

// 3. 创建图形
const bar = new Bar({
    attrs: {
        data: data,
        autoFit: true,
        xField: "count",
        yField: "name",
        yAxis: false,
        xAxis: false,
    },
    style: {
        width: 200,
        height: 200,
    },
})

// 4. 添加图形
canvas.appendChild(bar)

[xiaoiver]

您好请问有考虑直接使用 G2 5.0 么，它的底层渲染引擎用的就是 G：
https://g2.antv.antgroup.com/

G2Plot 我理解过去就是基于 G2 的简单封装。现在应该还没升级到 G2 5.0，所以不妨尝试直接用。

[zhengxs2018]

我试试，感谢🙏

[pearmini]

G2 5.0 提供了直接把图表渲染进 G 的一个 group 的能力，可以参考如下：

import { Canvas, Group } from '@antv/g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Chart } from '@antv/g2';

// Create a renderer.
const renderer = new CanvasRenderer();

// Create a canvas.
const canvas = new Canvas({
  container: 'container',
  width: 600,
  height: 500,
  renderer: renderer,
});

// Create a group.
const group = new Group();
canvas.appendChild(group);

// Create a chart and mount into the group.
const chart = new Chart({ group });

chart.options({
  type: 'interval',
  theme: 'classic',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  },
  encode: { x: 'letter', y: 'frequency' },
  axis: { y: { labelFormatter: '.0%' } },
});

chart.render();

[zhengxs2018]

我试试，感谢🙏