antvis/G2

【v5】折线图断掉后,Chart 自适应无法正确擦除上一次 label 绘制 #5172

Deathsteps posted onGitHub

问题描述

该问题是不是跟 #5165 有关联 <img width="456" alt="image" src="https://github.com/antvis/G2/assets/1549118/7afcb5de-1875-4c23-ad28-6fc4446e06da">

期望结果

自适应的时候能正常擦除上一次的 label

如何重现

官方代码修改

import { Chart } from '@antv/g2';

const data = [
  { time: '10:10', call: 4, waiting: 2888, people: 2 },
  { time: '10:15', call: 2, waiting: 6999, people: 3 },
  { time: '10:20', call: 13, },
  { time: '10:25', call: 9, waiting: 2229, people: 1 },
  { time: '10:30', call: 5, waiting: 2333, people: 3 },
  { time: '10:35', call: 8, waiting: 3432, people: 1 },
  { time: '10:40', call: 13, waiting: 4551, people: 2 },
];

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart.data(data);

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'waiting')
  .axis('y', { title: 'Waiting', style: { titleFill: '#5B8FF9' } })
  .label({ text: 'waiting' });

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'people')
  .encode('shape', 'smooth')
  .style('stroke', '#fdae6b')
  .style('lineWidth', 2)
  .scale('y', { independent: true })
  .axis('y', {
    position: 'right',
    grid: null,
    title: 'People',
    style: {
      titleFill: '#fdae6b',
    },
  })
  .label({ text: 'waiting' });

setInterval(() => {
  document.getElementById('container').style.width = 
    Math.round(Math.random() * 100) + 300 + 'px'
  chart.forceFit();
}, 3000);

chart.render();

额外信息

  • G2 5.0.11

Fund this Issue

$0.00
Funded

Pull requests