antvis/G2

折线图无法更改数据标签的位置 (position字段设置值无效) #6103

Calmio-Y posted onGitHub

问题描述

1:position设置top,left,bottom等等无变化 <img width="829" alt="企业微信截图_20240301112228" src="https://github.com/antvis/G2/assets/30626950/3896647c-6e20-4cf9-8368-6f2605915983">

重现链接

No response

重现步骤

1:代码如下 import { Chart } from '@antv/g2';

const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ];

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

chart .data(data) .encode('x', 'year') .encode('y', 'value') .scale('x', { range: [0, 1], }) .scale('y', { domainMin: 0, nice: true, });

chart.line().label({ text: 'value', position:'left', // bottom right // style: { // dx: -10, // dy: -12, // }, });

chart.point().style('fill', 'white').tooltip(false);

chart.render();

预期行为

期望看到数据标签position展示正常

平台

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

屏幕截图或视频(可选)

补充说明(可选)

No response


对于折线图,label 的 position 参考位置是折线上的每个点,所以 position 无论设置什么,都是一个点。你需要设置的是 label 相对于这个点,怎么显示?是左对齐,还是右对齐,或者上下对齐方式,可以使用下面的方法:

chart.line().label({
  text: 'value',
  position:'left',
  textAlign: 'right',
  textBaseline: 'top',
});
posted by hustcc about 1 year ago

@hustcc image 我这个配置 label 相对于这个点右对齐,图看着也不对啊

posted by Calmio-Y about 1 year ago
  • textAign = right 意思是标签文本的右边对着那个数据点的 x
  • textBaseline = bottom 意思是标签文本的底部对着那个数据点 y
posted by hustcc about 1 year ago

@hustcc 明白了,谢谢

posted by Calmio-Y about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests