g2图表库是否可以作为PIXI画布的子元素，我们想用pixi做数据图表的可视化搭建 #6153

问题描述

import { Chart } from '@antv/g2';
import * as PIXI from 'pixi.js';

class Pie extends PIXI.Container {
    private chart: Chart | null; // 存储图表实例
    private app: PIXI.Application;

    constructor(app: PIXI.Application) {
        super();
        this.chart = null;
        this.app = app;
        this.createPieChart(); // 在构造函数中调用创建饼状图的方法
    }

    // 创建并绘制饼状图
    private createPieChart() {
        // const container = new PIXI.Container(); // 创建一个 PIXI 容器用于承载图表

        this.chart = new Chart({
            // container: document.createElement('div'),
            canvas: this.app.canvas as any,
            width: 400, // 设置宽度
            height: 300, // 设置高度
        });
        const data = [
            { item: '事例一', count: 40, percent: 0.4 },
            { item: '事例二', count: 21, percent: 0.21 },
            { item: '事例三', count: 17, percent: 0.17 },
            { item: '事例四', count: 13, percent: 0.13 },
            { item: '事例五', count: 9, percent: 0.09 },
        ];
        this.chart.coordinate({ type: 'theta', outerRadius: 0.8 });

this.chart
  .interval()
  .data(data)
  .transform({ type: 'stackY' })
  .encode('y', 'percent')
  .encode('color', 'item')
  .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
  .label({
    position: 'outside',
    text: (data: { item: any; percent: number; }) => `${data.item}: ${data.percent * 100}%`,
  })
  .tooltip((data) => ({
    name: data.item,
    value: `${data.percent * 100}%`,
  }));
        this.chart.render(); // 渲染图表

        console.log(this.chart)

        // 将 G2 图表转换为 Canvas
const canvasWrap = this.chart.getContainer();


// 创建 Pixi.js 纹理
const texture = PIXI.Texture.from(canvasWrap.firstChild as HTMLCanvasElement);

// 创建 Pixi.js 精灵
const sprite = new PIXI.Sprite(texture);

// 添加精灵到 Pixi.js 场景中
this.addChild(sprite);
    }
}

export default Pie;

做过的尝试： 1、把图表canvas转成pixi纹理，但是丢失了原有图表的各种交互 2、new Chart({canvas: this.app.canvas as any...})，但是无法拿到config，报错this._context.canvas.getConfig().supportsCSSTransform = true getConfig方法不存在。这里猜测：pixi的canva和chart canvs的context不一样，导致无法兼容

pixijs：https://pixijs.com/

重现链接

No response

重现步骤

No response

预期行为

我想在pixi画布上新建图表，并且该图表是pixi画布的子元素

pixijs：https://pixijs.com/

希望可以提供一个平滑的处理方式，pixi和g2 chart的兼容

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response