antvis/G2

5.x版本条形图y轴显示双刻度 #6602

ustcfury posted onGitHub

Describe the bug / 问题描述

5.x版本条形图y轴是否可以显示双刻度,例如左侧显示刻度值,右侧展示刻度百分比?

Image

无复现

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

在 G2 5.x 版本中,您可以通过自定义 y 轴的刻度来实现显示双刻度的效果,例如左侧显示刻度值,右侧展示刻度百分比。虽然官方文档中没有直接提到双刻度的实现,但您可以通过以下方法进行自定义:

  1. 自定义刻度:您可以使用 scale 方法来自定义 y 轴的刻度。例如,您可以定义一个自定义的 tickMethod 来生成所需的刻度值。

    chart
      .interval()
      // ...
      .scale('y', {
        type: 'linear',
        domain: [0, 100],
        tickMethod: () => [0, 20, 40, 60, 80, 100] // 自定义刻度
      });
  2. 使用多轴:如果需要在同一图表中显示不同的刻度单位(如值和百分比),可以考虑使用多轴图表。通过在图表中添加多个 y 轴来实现不同的刻度显示。

    具体实现可能需要结合自定义的刻度和多轴配置来达到您想要的效果。

如果您需要更详细的实现步骤或示例代码,请告诉我,我会尽力帮助您。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] 2 months ago

可以参考官网双轴图的案例代码。

posted by hustcc 2 months ago

⚠️ This issue has been automatically closed due to inactivity.

  • If the issue is still relevant and important to you, feel free to:
    1. Reopen with additional information
    2. Create a new issue with updated context
    3. Reference any related issues or discussions

We close inactive issues to keep our backlog manageable and focused on active issues.

Your contribution makes our project better! 🌟


⚠️ 由于长期无活动,此 issue 已被自动关闭。

  • 如果这个问题对您来说仍然重要,您可以:
    1. 重新打开并提供补充信息
    2. 创建一个新的 issue 并更新相关背景
    3. 关联相关的 issue 或讨论

为了更好地维护项目,我们需要定期清理不活跃的问题。

感谢您为开源添砖加瓦!🌟

posted by github-actions[bot] 2 months ago

Fund this Issue

$0.00
Funded

Pull requests