g2-extensions-table #5841

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

专家任务

任务介绍

对于数组数据，可以使用 line、interval、point 等 mark 去可视化，对于完成度百分比数据，我们可以使用 gauge、liquid 等去可视化。

而对于更高维度的数据可视化，有几种方案：

• 增加 聚合的 transform，比如 groupBy 等
• 使用 series 等通道，但是对于不同图形有限制，不是所有 mark 都有这些通道
• 使用平行坐标系，但是对于维度值数量比较多的，效果不好
• 表格 table

目前前三种都是 G2 能支持的，只有 table 目前不支持，而只有表格 table 是无论多少维度的数据，都能很好的支持显示的。

技术方案

chart
  .table()
  .data(dataArr)
  .style({
    /* 各种样式配置，需要考虑，参考 S2 */
  });

核心提示：

• mark 中什么都不做，直接透传数据和配置。
• shape.table 中获得画布剩余视窗空间、字段列、行列高度等信息去处理视窗显示的数据
• 按需显示滚动条，以及滚动条的事件
• 仅仅只实现只有列头的表格，无行头
• 表头锁定

最终在 g2-extensions 中增加一个 @antv/g2-extension-table 的包。

参考说明

一个简单的实现：https://observablehq.com/@pearmini/g2-table

但是缺失功能：

• 样式配置，比如颜色，高度等
• 大数据下的滚动条
• 视窗按需渲染