Skip to content

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

Description

@zj-93

🐛 Bug description [Please make everyone to understand it]

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

Image

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();

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions