antvis / antvis/F2

axis改动label,滑动之后x轴label会跳动

Open
#616 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.