antvis/G2

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

ustcfury posted onGitHub

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

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 / 其他

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

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

Image

posted by interstellarmt 2 months ago

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

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

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

Image

posted by ustcfury 2 months ago

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

  .scale('color', {
    domain: ["$appInstanceId", "$appInstanceId1"],
  })
posted by interstellarmt 2 months ago

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

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

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

posted by ustcfury 2 months ago

Fund this Issue

$0.00
Funded

Pull requests