[Feat]: 增加 toolbox 这种组件

[lemonweb]

Describe the feature / 功能描述

期望 G2 可以增加类似 echarts 的 toolbox 这种组件

Are you willing to contribute? / 是否愿意参与贡献？

❌ No / 否

[github-actions]

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

感谢您的建议！关于增加类似 ECharts 的 toolbox 组件，您的需求很有价值，主要涉及图表交互、导出（如 PNG）、重置等功能。下面为您详细说明当前 G2 支持的相关能力及后续可能的实现方式：

---

1. G2 当前交互与导出能力

• 交互组件：G2 支持多种全局交互，例如滑动、筛选、刷选（brush）、图例、标签等。交互可通过 interaction() 方法或在 options() 中配置。
• 导出功能：G2 支持通过 node-canvas 导出 PNG（主要用于 Node 环境）。前端导出可通过获取 canvas 元素并调用 toDataURL() 实现。

  // 前端导出 PNG 示例
  const canvas = chart.getContext().canvas;
  const url = canvas.toDataURL('image/png');
  // 可通过下载链接保存图片

• 重置交互：可通过自定义按钮，结合交互事件和 chart API（如 emit()），实现图表状态重置。

---

2. 实现自定义 toolbox 的思路

虽然 G2 暂无内置 toolbox 组件，但可通过如下方式实现类似功能：

方案一：自定义 DOM 工具栏

1. 创建按钮组（如导出、重置、筛选等），插入到图表容器顶部。
2. 监听按钮事件，调用 G2 API 实现对应功能。

   // 假设 chart 已初始化
   // 导出 PNG
   exportBtn.onclick = () => {
     const canvas = chart.getContext().canvas;
     const url = canvas.toDataURL('image/png');
     // 创建下载链接
     const link = document.createElement('a');
     link.href = url;
     link.download = 'chart.png';
     link.click();
   };
   
   // 重置交互
   resetBtn.onclick = () => {
     chart.emit('brush:remove'); // 以 brush 为例
     chart.render();
   };

3. 样式与布局可完全自定义。

方案二：扩展 G2 组件生态

• G2 支持自定义组件注册（见 register()），可开发 toolbox 组件并注册到 G2。

---

3. 丰富交互参考

• 滑动筛选：sliderFilter、scrollbar 等交互，可实现数据区间筛选。
• 刷选高亮：brushHighlight、brushFilter，可自定义刷选逻辑。
• 监听事件：可通过 chart.on('component:click', ...)、chart.on('label:click', ...) 等，实现更丰富的自定义交互。

---

4. 后续建议

• 官方建议：您的 toolbox 组件需求已经反馈，会在后续版本评估是否内置此能力。
• 临时实现：推荐参考上述自定义 DOM 工具栏方案，可快速实现大部分 toolbox 功能。

---

参考文档

• G2 交互 API
• 组件事件
• 导出图片

---

如果您有具体的功能需求或设计方案，欢迎进一步补充！如需代码实现示例，也可随时提出。感谢关注 G2！

---

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