G2 icon indicating copy to clipboard operation
G2 copied to clipboard

[Bug]: 线标注和滑动条同时存在,并且线标注的值超过数据最大值,滑动之后,线标注会消失

Open JmoVxia opened this issue 9 months ago • 2 comments

Describe the bug / 问题描述

Image

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

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

chart
.data([
  { Day: 1, Value: 54.8 },
  { Day: 2, Value: 112.1 },
  { Day: 3, Value: 63.6 },
  { Day: 4, Value: 37.6 },
  { Day: 5, Value: 79.7 },
  { Day: 6, Value: 137.9 },
  { Day: 7, Value: 120.1 },
  { Day: 8, Value: 103.3 },
  { Day: 9, Value: 294.8 },
  { Day: 10, Value: 199.5 },
  { Day: 11, Value: 72.3 },
  { Day: 12, Value: 51.1 },
  { Day: 13, Value: 112.0 },
  { Day: 14, Value: 174.5 },
  { Day: 15, Value: 130.5 },
])
.axis('y', { title: false });

chart.interval()
  .encode('x', 'Day')
  .encode('y', 'Value')
  .scrollbar('x', {
    ratio: 0.5,
    values: [0, 1],
  })


chart
  .lineY()
  .data([300])
  .style('stroke', '#F4664A')
  .label({
    text: 'hazardous',
    position: 'left',
    textBaseline: 'bottom',
    fill: '#F4664A',
    background: true,
    backgroundFill: '#F4664A',
    backgroundOpacity: 0.25,
  })
  .scrollbar('x', false);

chart.render();

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • [x] macOS
  • [ ] Windows
  • [ ] Linux
  • [ ] Others / 其他

Browser / 浏览器

  • [x] Chrome
  • [ ] Edge
  • [ ] Firefox
  • [ ] Safari (Limited support / 有限支持)
  • [ ] IE (Nonsupport / 不支持)
  • [ ] Others / 其他

JmoVxia avatar Mar 24 '25 08:03 JmoVxia

看了一下应该是滚动之后图表的主区域高度计算没有算上text的高度,导致text被遮挡。 可以先配置一下图表上方呼吸范围的大小

{
     insetTop: 50
}

interstellarmt avatar Mar 24 '25 09:03 interstellarmt