fix(#2264): 修复 canvas 样式导致的 resize 问题, 修复容器层级

src/chart/chart.ts

@@ -1,11 +1,11 @@
-import { debounce, each, isString } from '@antv/util';
+import { debounce, each, isString,  } from '@antv/util';
 
 import { ChartCfg } from '../interface';
 
 import { GROUP_Z_INDEX } from '../constant';
 
 import { getEngine } from '../engine';
-import { createDom, getChartSize, removeDom } from '../util/dom';
+import { createDom, getChartSize, removeDom, modifyCSS } from '../util/dom';
 import View from './view';
 
 /**
@@ -58,7 +58,7 @@ export default class Chart extends View {
     const G = getEngine(renderer);
 
     const canvas = new G.Canvas({
-      container: ele,
+      container: wrapperElement,
       pixelRatio,
       localRefresh,
       ...size,
@@ -89,6 +89,7 @@ export default class Chart extends View {
     this.wrapperElement = wrapperElement;
 
     // 自适应大小
+    this.updateCanvasStyle();
     this.bindAutoFit();
     this.initDefaultInteractions(defaultInteractions);
   }
@@ -150,6 +151,13 @@ export default class Chart extends View {
     this.changeSize(width, height);
   }
 
+  private updateCanvasStyle() {
+    modifyCSS(this.canvas.get('el'), {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+    });
+  }
+
   private bindAutoFit() {
     if (this.autoFit) {
       window.addEventListener('resize', this.onResize);

src/util/dom.ts

@@ -64,4 +64,4 @@ export function removeDom(dom: HTMLElement) {
 }
 
 /** @ignore */
-export { createDom } from '@antv/dom-util';
+export { createDom, modifyCSS } from '@antv/dom-util';

tests/bugs/2264-spec.ts

@@ -0,0 +1,32 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('#2264', () => {
+  const div = createDiv();
+  div.style.height = '300px';
+  const data = [
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 5 },
+  ];
+  const chart = new Chart({
+    container: div,
+    width: 400,
+    height: 100,
+    autoFit: true,
+  });
+
+  chart.data(data);
+  chart.interval().position('year*value');
+
+  chart.render();
+
+  it('canvas height === container size', async () => {
+    expect(getComputedStyle(chart.canvas.get('el')).height).toBe(getComputedStyle(div.querySelector('div')).height);
+  });
+
+  it('g2 div 层级结构', () => {
+    expect(chart.canvas.get('el').parentNode).toBe(div.querySelector('div'));
+    expect(chart.canvas.get('el').parentNode.parentNode).toBe(div);
+  })
+});