antvis/G2

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

liswn posted onGitHub

设置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)
}

}

```


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

posted by hustcc over 2 years ago

@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 },
  ]);
};
posted by liswn over 2 years ago

Fund this Issue

$0.00
Funded

Pull requests