antvis / antvis/G2Plot

🐛 [BUG]堆叠柱状图,组内排序错乱

Open
#3,862 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

### 🐛 Bug description [Please make everyone to understand it]
当2021,2022年都有 PICU(普外科) 时但它们在组内的位置不一样,这时候,即使先将数据排好序再渲染,组内排序也是错乱的、请问是否还有别的办法可以规避或解决这个问题

![Image](https://github.com/user-attachments/assets/57e903d3-047e-4780-ad52-d768208c4535)

import { Column } from '@antv/g2plot';
let list = [
{
"value": 1,
"dimensionList": [
{
"id": "14",
"value": "2021"
},
{
"id": "13",
"value": "ICU(口腔科)"
}
],
"quotaList": [
{
"id": "3ae8d90c-0157-404f-acbd-9019b064bbb8"
}
],
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(口腔科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(中医科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(妇科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "心血管外科门诊",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(耳鼻喉科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 2,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "PICU(心胸外科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 2,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(感染科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 2,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(烧伤整形科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 3,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(肿瘤科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 4,
"field": "2021",
"name": "2021",
"parentCategory": null,
"category": "ICU(产科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "PICU(泌尿外科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "全科医疗科",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "ICU(妇科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "ICU(耳鼻喉科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "ICU(中医科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "ICU(眼科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 1,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "心血管外科门诊",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 2,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "PICU(骨科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 2,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "PICU(普外科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
},
{
"value": 3,
"field": "2022",
"name": "2022",
"parentCategory": null,
"category": "PICU(心胸外科)",
"rowKey": null,
"calcType": null,
"popSize": null,
"group": null,
"extValue": null,
"x": null
}
]

const stackedColumnPlot = new Column('container', {
data: list,
isStack: true,
xField: 'field',
yField: 'value',
seriesField: 'category',
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
});

stackedColumnPlot.render();

Contributor guide

Open the contributing guide

Research direction

Start by running the provided TypeScript example with the sample list and stacked Column configuration. Inspect how the chart orders categories within each year when shared categories appear in different positions; done means the intended within-group ordering remains consistent across the stacked columns.

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
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.