New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
qvxvx opened this Issue Jul 22, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@qvxvx

qvxvx commented Jul 22, 2018

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

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

@simaQ

This comment has been minimized.

Contributor

simaQ commented Jul 23, 2018

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

@qvxvx

This comment has been minimized.

qvxvx commented Jul 23, 2018

$.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('release
count');

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 simaQ self-assigned this Jul 23, 2018

@simaQ simaQ added the bug label Jul 23, 2018

simaQ added a commit that referenced this issue Jul 23, 2018

This was referenced Jul 23, 2018

@simaQ

This comment has been minimized.

Contributor

simaQ commented Jul 23, 2018

更新 F2 版本: 3.2.0-beta.9

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

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

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

gif1111

@simaQ simaQ closed this Aug 3, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment