axis改动label,滑动之后x轴label会跳动
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description
这是官网给出的示例加了axis,之后滑动会产生x轴的label跳动,项目中遇到这个问题!!
F2 图表组件库 - AntV
/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;
$.getJSON('/assets/data/f2/linear-pan.json', function(data) {
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
release: {
min: 1990,
max: 2010
}
});
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('release*count');
chart.point().position('release*count').style({
lineWidth: 1,
stroke: '#fff'
});
chart.interaction('pan');
// 定义进度条
chart.scrollBar({
mode: 'x',
xStyle: {
offsetY: -5
}
});
chart.axis('release', {
top: true,
label: (text) => {
const cfg = {
textAlign: 'start'
}
// x轴是时间就截断日期
const text1 = text;
const val = text1.slice(0,3)
cfg.text = val;
return cfg;
}
})
// 绘制 tag
chart.guide().tag({
position: [1969, 1344],
withPoint: false,
content: '1,344',
limitInPlot: true,
offsetX: 5,
direct: 'cr'
});
chart.render();
});
Contributor guide
Research direction
Start with the supplied HTML reproduction using F2 3.3.8, then inspect the chart.axis('release') label callback together with the pan interaction and x-axis scrollbar. Reproduce the label movement while sliding and compare the rendered labels before and after; done means the truncated x-axis labels remain stable during panning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100