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

折线图按Y轴降序排序 #6544

Open
LUUUAN opened this issue Dec 9, 2024 · 1 comment
Open

折线图按Y轴降序排序 #6544

LUUUAN opened this issue Dec 9, 2024 · 1 comment

Comments

@LUUUAN
Copy link

LUUUAN commented Dec 9, 2024

问题描述

使用transform({ type: 'sortX', by: 'y', reverse: true}) 对折线图排序,会导致线条错乱

重现链接

https://codesandbox.io/p/sandbox/nervous-joliot-hg59ty

重现步骤

No response

预期行为

期望能够实现折线图按Y轴降序排序

平台

  • 操作系统: [macOS,]
  • 网页浏览器: [Google Chrome]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

@pearmini
Copy link
Member

pearmini commented Dec 9, 2024

复现代码如下:原因应该是 sortX 当 x 通道是 ordinal 数据的时候,只对 x scale 的 domain 进行了排序,而不是对数据整体进行排序。

image
import { Chart } from "@antv/g2";

const chart = new Chart({
  container: "container",
});

// Apply academy theme.
chart.theme({ type: "academy" });

chart
  .line()
  .data({
    type: "fetch",
    value:
      "https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv",
    format: "csv",
  })
  .transform({ type: "groupX", reducer: "sum" })
  .encode("x", "state")
  .encode("y", "population")
  .encode("series", () => "b")
  .transform({ type: "sortX", by: "y" });

chart.render();

但是如下设置也不行 .transform({ type: "sortX", by: "y", ordinal: false });,这个问题可能需要看看?@hustcc

image

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

No branches or pull requests

3 participants