antvis / antvis/G2Plot

折线图,柱状图x轴label在autoRotate临界点时,label被遮挡

Open
#3,838 0 comments 0 reactions 0 assignees View on GitHub
Bug
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

![折线图](https://github.com/user-attachments/assets/f59ac38f-aa87-4e6e-978c-61dd9c3f8514)
![柱状图](https://github.com/user-attachments/assets/a7214c67-4f8a-4cf7-bbcf-c835d5991c30)

柱状图代码
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.