设置autoFit:true，容器尺寸发生改变触发自适应后tooltip异常

[liswn]

设置autoFit:true，容器尺寸发生改变触发自适应后tooltip异常

• 版本：4.2.7
• 引入方式：浏览器本地引用
• 问题：设置autoFit:true，容器尺寸发生改变触发自适应后tooltip不能正确的触发

<div style="width:100%;height:100%" id="demoChart"></div>

const demoChart = new MyChart("demoChart")

demoChart.changeData([{
   x: '9.13',
  y: 1000
}])

class MyChart {
    constructor(domId) {
        this.domId = domId
        const chart = new G2.Chart({
            container: domId,
            autoFit: true
        });
        chart.scale("x", {
            nice: true
        });
        chart.scale("y", {
            nice: true
        });

        chart.tooltip(true);
        chart.legend(true);

        chart.interval().position('x*y').color('x')

        this.chart = chart
    }
    changeData(data) {
        this.chart.changeData(data)
    }
}

[hustcc]

这个看不出问题，可以在 G2 官网复现一个最小 demo 吗？然后把代码贴上来。

[liswn]

@hustcc 代码： https://stackblitz.com/edit/js-cgamr9?file=index.js demo：https://js-cgamr9.stackblitz.io

我刚才发现好像是tooltip同时设置了shared:true后会触发，按F11切换全屏就会触发

<style>
  body {
    margin: 0;
  }
</style>
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.7/dist/g2.min.js"></script>
<div id="app" style="width: 100vw; height: 100vh"></div>

class MyChart {
  constructor(domId) {
    this.domId = domId;
    const chart = new G2.Chart({
      container: domId,
      autoFit: true,
    });
    chart.scale('x', {
      nice: true,
    });
    chart.scale('y', {
      nice: true,
    });

    chart.tooltip({
      showMarkers: false,
      shared: true,
    });

    chart
      .interval()
      .position('x*y')
      .color('name')
      .adjust([
        {
          type: 'dodge',
          marginRatio: 0,
        },
      ]);
    chart.interaction('active-region');

    this.chart = chart;
  }
  changeData(data) {
    this.chart.changeData(data);
  }
}
window.onload = function () {
  const demoChart = new MyChart('app');

  demoChart.changeData([
    { name: 'a', x: '2022-09-13 00:00:00', y: 0 },
    { name: 'a', x: '2022-09-12 00:00:00', y: 2006 },
    { name: 'a', x: '2022-09-11 00:00:00', y: 33 },
    { name: 'a', x: '2022-09-10 00:00:00', y: 10 },
    { name: 'a', x: '2022-09-09 00:00:00', y: 0 },
    { name: 'a', x: '2022-09-08 00:00:00', y: 2 },
    { name: 'a', x: '2022-09-07 00:00:00', y: 0 },
    { name: 'b', x: '2022-09-13 00:00:00', y: 1163 },
    { name: 'b', x: '2022-09-12 00:00:00', y: 1163 },
    { name: 'b', x: '2022-09-11 00:00:00', y: 459 },
    { name: 'b', x: '2022-09-10 00:00:00', y: 329 },
    { name: 'b', x: '2022-09-09 00:00:00', y: 8 },
    { name: 'b', x: '2022-09-08 00:00:00', y: 8 },
    { name: 'b', x: '2022-09-07 00:00:00', y: 0 },
  ]);
};