Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: 5.x版本柱状图 x 轴顺序如何固定(不跟随数据先后顺序) #6600

Closed
2 of 10 tasks
ustcfury opened this issue Feb 11, 2025 · 4 comments
Closed
2 of 10 tasks

Comments

@ustcfury
Copy link

Describe the bug / 问题描述

5.x版本柱状图 x 轴顺序如何固定,不跟随数据先后顺序
比如我想让图中x轴的 “1”始终出现在第一位
//code
import { Chart } from "@antv/g2";
const chart = new Chart({
container: "container",
width: 1000,
});

chart
.interval()
.data([ {
Time: 1,
name: "$appInstanceId",
value: 5.083333333333333,
},
{
Time: 2,
name: "$appInstanceId",
value: 5.266666666666667,
},
{
Time: 3,
name: "$appInstanceId",
value: 5.833333333333333,
}, {
Time: 1,
name: "$appInstanceId1",
value: 5.083333333333333,
},
{
Time: 2,
name: "$appInstanceId1",
value: 5.266666666666667,
},
{
Time: 3,
name: "$appInstanceId1",
value: 5.833333333333333,
}])
.encode("x", (d) => (d.Time))
.encode("y", "value")
.encode("color", "name")
.transform({ type: "stackY" })
.axis("x", {
title: null,
tick: false,
// 刻度值
labelAutoHide: true,
labelAlign: "horizontal",
labelAutoEllipsis: true,
labelAutoWrap: false,
labelAutoRotate: false,
});
chart.render();

Image
当 {
Time: 1,
name: "$appInstanceId",
value: 5.083333333333333,
}这条数据不存在时,x轴下标顺序会变成"2 3 1",而预期是"1 2 3"

Image

Reproduction link / 复现链接

https://codesandbox.io/p/sandbox/antv-g2-5-0-template-z2gsmn

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
@ustcfury ustcfury added the waiting for maintainer Triage or intervention needed from a maintainer label Feb 11, 2025
@interstellarmt
Copy link
Contributor

interstellarmt commented Feb 11, 2025

如果对于顺序有要求,可以像这样在data里用transform处理:

.data(
    {
      type: 'inline',
      value: data,
      transform: [
        {
          type: 'sortBy',
          fields: ['Time'],
        },
      ],
    })

Image

@interstellarmt interstellarmt added waiting for author Further information is requested from the author and removed waiting for maintainer Triage or intervention needed from a maintainer labels Feb 11, 2025
@ustcfury
Copy link
Author

如果对于顺序有要求,可以像这样在data里用transform处理:

.data(
{
type: 'inline',
value: data,
transform: [
{
type: 'sortBy',
fields: ['Time'],
},
],
})
Image

非常感谢大佬,这是一种方法。但是这样会改变上方图例的顺序,我想知道有能保持图例顺序不变的方法嘛 ,十分感谢

Image

@github-actions github-actions bot added waiting for maintainer Triage or intervention needed from a maintainer and removed waiting for author Further information is requested from the author labels Feb 11, 2025
@interstellarmt
Copy link
Contributor

interstellarmt commented Feb 11, 2025

图例的顺序是根据数据自动生成的,如果不希望修改数据,可以配置一下color通道的比例尺的顺序

  .scale('color', {
    domain: ["$appInstanceId", "$appInstanceId1"],
  })

@interstellarmt interstellarmt added waiting for author Further information is requested from the author and removed waiting for maintainer Triage or intervention needed from a maintainer labels Feb 11, 2025
@ustcfury
Copy link
Author

图例的顺序是根据数据自动生成的,如果不希望修改数据,可以配置一下color通道的比例尺的顺序

.scale('color', {
domain: ["$appInstanceId", "$appInstanceId1"],
})

感谢大佬🙏解决了我的问题!

@github-actions github-actions bot removed the waiting for author Further information is requested from the author label Feb 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants