折线图无法更改数据标签的位置 （position字段设置值无效）

[Calmio-Y]

问题描述

1：position设置top,left,bottom等等无变化

重现链接

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

[hustcc]

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

chart.line().label({
  text: 'value',
  position:'left',
  textAlign: 'right',
  textBaseline: 'top',
});

[Calmio-Y]

@hustcc

我这个配置 label 相对于这个点右对齐，图看着也不对啊

[hustcc]

• textAign = right 意思是标签文本的右边对着那个数据点的 x
• textBaseline = bottom 意思是标签文本的底部对着那个数据点 y

[Calmio-Y]

@hustcc 明白了，谢谢