[Bug]: 折线图拖拽slider报错

[taoeer]

Describe the bug / 问题描述

折线图开启x轴slider时，拖动slider时报错。

复现代码

import { Chart } from '../src';

const chart = new Chart({ container: 'container', autoFit: true });

chart.options({
  slider: {
    x: {
      position: 'bottom',
      values: [0, 1],
    },
  },
  type: 'line',
  data: [
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 39,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7540,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-13',
      $$datum_index$$: 74,
    },
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 14,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7554,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-14',
      $$datum_index$$: 75,
    },
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 1,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7555,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-15',
      $$datum_index$$: 76,
    },
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 4,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7559,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-16',
      $$datum_index$$: 77,
    },
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 49,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7608,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-17',
      $$datum_index$$: 78,
    },
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 35,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7643,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-18',
      $$datum_index$$: 79,
    },
    {
      'a6fdba07-791b-42b5-83e4-ead8a27f4867': 50,
      '20c7d895-8657-47e7-9eeb-7af5601010f2': 7693,
      '012e9175-db17-4a0f-b361-bbacafebaf6d': '2025-11-19',
      $$datum_index$$: 80,
    },
  ],
  encode: {
    x: '012e9175-db17-4a0f-b361-bbacafebaf6d',
    y: '20c7d895-8657-47e7-9eeb-7af5601010f2',
  },
  labels: [
    {
      text: '20c7d895-8657-47e7-9eeb-7af5601010f2',
      transform: [
        {
          type: 'exceedAdjust',
          bounds: 'main',
        },
      ],
    },
  ],
});

chart.render();

Reproduction link / 复现链接

No response

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

拖动x轴slider隐藏部分x轴即可

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@taoeer 您好！以下是关于您问题的自动回复：

您好，感谢您的反馈和详细复现代码。关于“折线图拖拽 x 轴 slider 报错”的问题，以下是针对 G2 v5 的排查与解决建议：

---

问题分析

根据您提供的代码和描述，主要问题出现在拖动 x 轴 slider 时，页面报错。造成该问题的常见原因有：

1. 缺失必要的 slider 交互配置
   G2 v5 折线图的 slider 需要与 sliderFilter 或 sliderWheel 交互配合，否则滑动时不会正确过滤数据，可能导致报错。

2. 数据编码与轴配置不匹配
   encode 配置的字段需要和数据结构严格对应，否则在滑动或过滤时会出现异常。

---

解决方案

1. 启用 sliderFilter 交互

在 chart.options 配置中补充 interaction 属性，激活 sliderFilter：

chart.options({
  // ...您的其他配置
  slider: {
    x: true, // 推荐直接用 true 激活默认 slider
  },
  interaction: {
    sliderFilter: true // 开启滑动过滤
  },
  // ...剩余配置
});

这样能确保拖拽 slider 时数据范围会正确过滤，不会报错。

---

2. 检查 encode 与数据字段

您的 encode 配置如下：

encode: {
  x: '012e9175-db17-4a0f-b361-bbacafebaf6d',
  y: '20c7d895-8657-47e7-9eeb-7af5601010f2',
},

请确保：

• 数据中的 x 字段（如 '012e9175-db17-4a0f-b361-bbacafebaf6d'）是字符串类型且无缺失
• y 字段（如 '20c7d895-8657-47e7-9eeb-7af5601010f2'）为数字类型
• 建议去除多余的 $$datum_index$$ 字段，避免编码扰乱

---

3. 推荐完整示例

参考官方文档，推荐如下配置：

import { Chart } from '@antv/g2';

const chart = new Chart({ container: 'container', autoFit: true });

chart.options({
  type: 'line',
  data: [...], // 保持您的数据格式
  encode: {
    x: '012e9175-db17-4a0f-b361-bbacafebaf6d',
    y: '20c7d895-8657-47e7-9eeb-7af5601010f2',
  },
  slider: {
    x: true,
  },
  interaction: {
    sliderFilter: true,
  },
});

chart.render();

---

进阶功能：支持鼠标滚轮缩放 slider

如需支持鼠标滚轮快速缩放 slider 区间，可参考：

interaction: {
  sliderFilter: true,
  sliderWheel: true,
}

可自定义 wheelSensitivity 等参数，具体见 G2 官方文档。

---

参考文档

• sliderFilter 交互文档
• sliderWheel 交互文档
• encode 配置文档

---

总结

1. 建议在 options 中添加 interaction: { sliderFilter: true }，并确保 slider 配置正确。
2. 检查 encode 字段与数据字段完全一致。
3. 若仍报错，请补充具体报错信息或控制台截图，以便进一步定位。

如有新问题，欢迎随时补充 issue！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[taoeer]

具体报错点： `l.getRenderBounds()` 返回了null

[interstellarmt]

两个问题：

1. exceedAdjust 和自适应 slider 冲突
2. slider 多轴条件缺少判断 key 不同的情况
   我修复一下～

[github-actions]

🎉 This issue has been resolved and is now available in the v5.4.5 release! 🎉