如何实现Tableau那样的分面图？

[bigfacewo]

想请教一下开发者，还有社区的各位大佬。

如果我想在用G2实现类似于Tableau那样的分面图，改造难度有多大？或者说已有的G2特性能支持那样的效果吗？

G2支持分面图，但是和Tableau的有区别，主要在以下几点：

1. Tableau的图表的轴、标题和内容区域是分开的，也就是说，我可以把轴和标题固定，数据多的时候只会滚动内容区域。而G2是整个图表一起滚动。

滚动到中间位置，可以看到y轴和标题区域的位置是不变的：

2. G2可以通过设置图表间距来让图表更加紧凑，但是设置为仍然还有间距：
   

如果将间距设置为负值，效果会好一些，但是轴的标签会重叠：

3. Tableau在数据较多的时候，会出现滚动条，里面会保证每一个分面的大小，使得数据量大的情况下，每个图形标记不会挤在一起（当然也可以设置固定宽高），但是G2目前没有发现这样的设置。也就是说，即便我用了分面图，能展示数据的范围也只有容器的大小这么大。

不知道我有没有描述清楚我的需求，希望各位大佬不吝赐教。

[pearmini]

G2 4.0 目前的特性无法做出 Tableau 这样的分面图。如果用 G2 4.0 的来做，其实改造成本还是挺大的，因为分析下来上面的图中只有条是 G2 来画，轴、标题都是外置的。这种比较定制化的图表用 D3 做可能还会更加方便一点，不过 G2 5.0 在年中的时候可能会支持这样的分面图。

[bigfacewo]

感谢回复。如果让自己用D3来做的话那个工作量就太大了🤣，我肯定是希望站在巨人的肩膀上来做事情。我看到你这边说 G2 5.0 在年中的时候可能会支持这样的分面图，我不太清楚5.0的特性，如果是基于5.0，那么我有哪些工作可以做呢？我也希望这个特特性早一些到来。

[pearmini]

在年中的使用，这种分面能力应该会作为一个插件，是在原始的分面能力上做一些能力和样式上的扩展，大概的使用方式如下。

import { FacetTableau } from '@antv/g2-tableau-facet';
import { Chart } from '@antv/g2';

const chart = new Chart();

chart.node(FacetTableau);

chart.render();

[Lee94]

5.0 中能实现这种图吗

[bigfacewo]

字节开源了一个visactor，其中的vtable+vgrammar应该能实现 https://github.com/VisActor

[bigfacewo]

请问这个特性已经提上日程了吗？ @pearmini

[pearmini]

暂时还没有哈

[bigfacewo]

@pearmini 再次催一下。
现在好多支持图形化语法的BI可视化产品都支持这样的分面图，finebi、有数、tableau等，如果G2也支持，将会变得niubi plus。

[bigfacewo]

再次催更😂 @pearmini

[hustcc]

这个不是那么简单的，毕竟 tableau 那是大团队在做，使用 G2 的分面可以实现样子，但是实际上还有一个比较核心的能力是在大数据下，需要做视窗按需渲染，这个才是最难的。

暂时不会在 G2 开源代码中去集成。

[bigfacewo]

你说得对，Tableau online在大数据量的情况下，还支持后端渲染。

视窗渲染的话，有个库也可以做：muzejs，但是项目早停了。

现在怎么说呢，其实只是想用G2做一个差不多的效果，但是离”较好的效果“还是差了一点，当然指的是UI上，不是性能优化上。

[hustcc]

AntV S2 表格做过视窗渲染，未来也会做类似 tableau 的图。

我之前也做过类似的事情，如果你这边想做类似的事情，我可以给一些指导，其实也不会特别复杂。

[bigfacewo]

@hustcc 愿闻其详。你这么说我才发现，其实可以用S2做布局，内部用G2来绘图，不知道S2是否支持。

[hustcc]

https://www.yuque.com/antv/blog/1122_7_s2#sEjGN

[bigfacewo]

@hustcc 我研究研究吧，谢谢.

[lijinke666]

目前 S2 2.0 版本支持在单元格内绘制 G2 图表 https://s2.antv.antgroup.com/manual/advanced/chart-in-cell