label的overflowHide转换在默认情况下的异常隐藏 #6596

在官网测试 transform的 overflowHide 属性竟然有些没超出的也隐藏了

在官网测试 transform的 overflowHide 属性竟然有些没超出的也隐藏了

这个代码粘贴出来，我调试看看。

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

const data = [
  { year: '1951 年', sales: 12 },
  { year: '1952 年', sales: 53332 },
  { year: '1956 年', sales: 63331 },
  { year: '1957 年', sales: 143335 },
  { year: '1958 年', sales: 43338 },
  { year: '1959 年', sales: 33338 },
  { year: '1960 年', sales: 33338 },
  { year: '1962 年', sales: 33338 },
];

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

chart
  .interval()

  .data(data)
  .encode('x', 'year')
  .encode('y', 'sales').label([
          {
            // position: "right",
            text: (data) => data.sales,
            // dx:(data)=>30,
            transform: [{ type: "overflowHide" }]
          },
     ]);

chart.render();

我这里是 ok 的，你看看你是什么版本的 G2？要不升级版本看看。

<!-- Failed to upload "image.png" -->

我划线的这两个没有超出吧？不也是隐藏了嘛？

你也是官网测试的吗？奇怪我也是官网测试的。你浏览器是什么，版本多少？

大哥，我就是用你贴出来的截图给你划线的，你那里也不行哈哈

我本地版本是5.2.10，请问最新版的是多少？

忽略，我看漏了，官网是渲染一下是有的，然后跳一下没有了，是一个 bug，我看看。

好的，谢谢 ，第一个问题 exceedAdjust 无效也能复现，我贴上代码贴图 import { Chart } from '@antv/g2';

const data = [ { year: '1951 年', sales: 12 }, { year: '1952 年', sales: 53332 }, { year: '1956 年', sales: 63331 }, { year: '1957 年', sales: 143335 }, { year: '1958 年', sales: 43338 }, { year: '1959 年', sales: 33338 }, { year: '1960 年', sales: 33338 }, { year: '1962 年', sales: 33338 }, ];

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

chart .interval()

.data(data) .encode('x', 'year') .encode('y', 'sales').label([ { // position: "right", text: (data) => data.sales, // dx:(data)=>30, transform: [{ type: "exceedAdjust" }] }, ]);

chart.render();

1. exceedAdjust是对超出视图边界的标签调整位置，图上的标签其实并没有超出，还在轴范围内，所以没有移动位置，如果想实现自适应的标签位置，可以这样写： import { Chart } from '@antv/g2';

const data = [ { year: '1951 年', sales: 12 }, { year: '1952 年', sales: 53332 }, { year: '1956 年', sales: 63331 }, { year: '1957 年', sales: 143335 }, { year: '1958 年', sales: 43338 }, { year: '1959 年', sales: 33338 }, { year: '1960 年', sales: 33338 }, { year: '1962 年', sales: 33338 }, ];

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

chart .interval() .coordinate({ transform: [{ type: 'transpose' }] }) .data(data) .encode('x', 'year') .encode('y', 'sales').label([ { text: 'sales', style: { textAlign: (d) => (+d.sales > 100 ? 'right' : 'start'), fill: (d) => (+d.sales > 100 ? '#fff' : '#000'), dx: (d) => (+d.sales > 100 ? -5 : 5), }, }, ]);

chart.render(); 效果如下：

2.overflowHide 要和position一起使用

1. exceedAdjust是对超出视图边界的标签调整位置，图上的标签其实并没有超出，还在轴范围内，所以没有移动位置，如果想实现自适应的标签位置，可以这样写： import { Chart } from '@antv/g2';

const data = [ { year: '1951 年', sales: 12 }, { year: '1952 年', sales: 53332 }, { year: '1956 年', sales: 63331 }, { year: '1957 年', sales: 143335 }, { year: '1958 年', sales: 43338 }, { year: '1959 年', sales: 33338 }, { year: '1960 年', sales: 33338 }, { year: '1962 年', sales: 33338 }, ];

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

chart .interval() .coordinate({ transform: [{ type: 'transpose' }] }) .data(data) .encode('x', 'year') .encode('y', 'sales').label([ { text: 'sales', style: { textAlign: (d) => (+d.sales > 100 ? 'right' : 'start'), fill: (d) => (+d.sales > 100 ? '#fff' : '#000'), dx: (d) => (+d.sales > 100 ? -5 : 5), }, }, ]);

chart.render(); 效果如下：

2.overflowHide 要和position一起使用

请问轴的范围包括哪些？label范围不应该在轴内侧么？能否将范围调整为内侧，因为如果是这样的话，产品和测试都会把他视为bug，这个属性的意义不大了，还要自己判断数据，如果数据差别过大的话，这样判断数据的方式就会有误差

还有 overflowHide 和position 连用的情况下，如果加了坐标反转，所有label都显示不出来了

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

const data = [ { year: '1951 年', sales: 38 }, { year: '1952 年', sales: 52 }, { year: '1956 年', sales: 61 }, { year: '1957 年', sales: 145 }, { year: '1958 年', sales: 48 }, { year: '1959 年', sales: 38 }, { year: '1960 年', sales: 38 }, { year: '1962 年', sales: 38 }, ];

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

chart .interval() .coordinate({ transform: [{ type: 'transpose' }] }) .label([ { position: "right", text: (data) => data.sales, // dx:(data)=>30, transform: [{ type: "overflowHide" }] }, ]) .data(data) .encode('x', 'year') .encode('y', 'sales');

chart.render();

你试下这样写： import { Chart } from '@antv/g2';

const data = [ { year: '1951 年', sales: 12 }, { year: '1952 年', sales: 53332 }, { year: '1956 年', sales: 63331 }, { year: '1957 年', sales: 143335 }, { year: '1958 年', sales: 43338 }, { year: '1959 年', sales: 33338 }, { year: '1960 年', sales: 33338 }, { year: '1962 年', sales: 33338 }, ];

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

});

chart .attr('paddingRight', 40) .interval() .coordinate({ transform: [{ type: 'transpose' }] }) .data(data) .encode('x', 'year') .encode('y', 'sales').label([ { text: 'sales', position: 'right', dx: 40 }, ]);

chart.render();

@chenaaaa1111 overflowHide 的问题是 js 浮点计算问题。我这边一会 pr 解决，你如果着急，可以这么先绕过。

.label([
  {
     text: 'xxx',
     dy: -1, // 因为浮点计算误差，导致文本的大小有极小值超出了柱形的区域，所以被隐藏了，符合代码逻辑
  }
])

好的，非常感谢各位耐心解答，真心希望exceedAdjust 范围能再优化下，希望各位大佬斟酌考虑优化

好的，非常感谢各位耐心解答，真心希望exceedAdjust 范围能再优化下，希望各位大佬斟酌考虑优化

@chenaaaa1111 合理需求，有兴趣来一个 PR 吗？

代码如下，只需要给 exceedAdjust 加一个配置标记是画布区域，还是图形区域就可以了。