F2平移交互中，引入Guide的Tag，Tag遮挡住y轴

[qvxvx]

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

F2平移交互中，引入Guide的Tag，已经设置top: false，Tag依然处于最顶层，遮挡了y轴；当值为0时候，Tag文本框内显示空。

[simaQ]

可以提供可复现的代码和截图吗？

[qvxvx]

$.getJSON('/assets/data/f2/linear-pan.json', function(data) {
var years = [];
data.map(function(obj) {
years.push(obj.release);
});
var min = Math.min.apply(null, years);
var max = Math.max.apply(null, years);
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio,
limitInPlot: true
});
chart.source(data, {
release: {
min: 2000,
max: 2010
}
});
data.map(function (obj) {
chart.guide().tag({
top: false,
position: [obj.release, obj.count],
content: obj.count == 0 ? '0' : obj.count,
direct: 'tc',
background: {
padding: [2, 3], // tag 内边距，使用同 css 盒模型的 padding
radius: 2, // tag 圆角
fill: '#999', // tag 背景色
},
textStyle: {
fontSize: 12,
fill: '#fff'
}, // tag 文本样式
withPoint: true,
offsetX: 0, // x 方向的偏移量
offsetY: -6 // y 方向偏移量
});
});
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [3, 5]
},
nameStyle: {
fill: '#fff'
},
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = items[0].title;
}
});

chart.line().position('releasecount');
chart.point().position('releasecount');

chart.interaction('pan', {
limitRange: {
release: {
min: min,
max: max
}
}
});
chart.render();
});
https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/x-pan.html
上面的代码替换官网事例中的代码

[simaQ]

更新 F2 版本： 3.2.0-beta.9

为 chart.guide() 新增 limitInPlot 属性，将其设置为 true 即可：

chart.guide().tag({
   // top: false, // 不需要设置了
   limitInPlot: true,
 });

Demo: https://codepen.io/Sima/pen/EpWLwM