antvis/G2

柱状图x 轴 encode的编码对应值过长,会导致encode x轴 编码不显示 #6001

hxz1993 posted onGitHub

问题描述

在绘制柱状图时,x 轴的文本过长,导致 genre 字符不显示了 image

重现链接

No response

重现步骤

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

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

chart .interval() .data([ { genre: 'Sports哈哈哈哈哈哈你你你版本他他哼哼唧唧哦', sold: 0 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ]) .encode('x', 'genre') .encode('y', 'sold') .encode('color', 'genre') // .style('minHeight', 50);

chart.title({ title:'主标题', subtitle:'副标题', style:{ titleFontSize:32, titleFill:'red' } })

chart.render();

预期行为

x 轴文本过长正常被截取,但是x 轴的genre 字符 能正常显示

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


这里可以通过 labelFormatter 解决哈:

chart.interval().label({
  labelFormatter: d => d.length > 5 ? d.slice(0, 5) + "...." : d
})
posted by pearmini over 1 year ago

labelFormatter 不能用,这个是处理label,我这边是x 坐标显示内容

posted by hxz1993 over 1 year ago

哦,写错了:

chart.interval().axis('x', {
  labelFormatter: d => d.length > 5 ? d.slice(0, 5) + "..." : d
})
posted by pearmini over 1 year ago

我不能指定说超过多少个字符截取,因为我们这边区域高度不是固定的,需要自适应,

posted by hxz1993 over 1 year ago

那你可以设置 paddingBottom 会取消旋转,自动隐藏:

const chart = new Chart({
  paddingBottom: 50
})
posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests