🐛 [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(普外科) 时但它们在组内的位置不一样,这时候,即使先将数据排好序再渲染,组内排序也是错乱的、请问是否还有别的办法可以规避或解决这个问题

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
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