折线图,柱状图x轴label在autoRotate临界点时,label被遮挡
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 591
- PR merge metrics
- No merged PRs in 30d
Description


柱状图代码
import { Column } from '@antv/g2plot';
const data = [
{
type: '家具家电',
sales: 38,
},
{
type: '粮油副食',
sales: 52,
},
{
type: '生鲜水果',
sales: 61,
},
{
type: '美容洗护',
sales: 145,
},
{
type: '母婴用品',
sales: 48,
},
{
type: '进口食品',
sales: 38,
},
{
type: '食品饮料',
sales: 38,
},
{
type: '家庭清洁',
sales: 38,
},
];
const columnPlot = new Column('container', {
data,
xField: 'type',
yField: 'sales',
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle',
// 配置样式
style: {
fill: '#FFFFFF',
opacity: 0.6,
},
},
xAxis: {
label: {
autoHide: true,
autoRotate: true,
},
},
meta: {
type: {
alias: '类别',
},
sales: {
alias: '销售额',
},
},
});
columnPlot.render();
折线图代码
import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const line = new Line('container', {
data: [
{
"Date": "2010-01",
"scales": 1998
},
{
"Date": "2010-02",
"scales": 1850
},
{
"Date": "2010-03",
"scales": 1720
},
{
"Date": "2010-04",
"scales": 1818
},
{
"Date": "2010-05",
"scales": 1920
},
{
"Date": "2010-06",
"scales": 1802
},
{
"Date": "2010-07",
"scales": 1945
},
{
"Date": "2010-08",
"scales": 1856
},
{
"Date": "2010-09",
"scales": 2107
},
{
"Date": "2010-10",
"scales": 2140
},
{
"Date": "2010-11",
"scales": 2311
},
{
"Date": "2010-12",
"scales": 1972
}
],
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
"label": {
"autoRotate": true,
"autoHide": true,
}
}
});
line.render();
});
Contributor guide
Research direction
Reproduce the issue with the supplied G2Plot Column and Line examples using xAxis.label autoRotate and autoHide. Start by tracing the label behavior at the auto-rotation boundary, then verify that labels are no longer obscured in both chart types at that boundary.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100