G2 如何调整柱状图间的间距

Question

在绘制柱状图的场景中有一种是 分组柱状图 （英文名：Multi-set Bar Chart, Grouped Bar Chart），在 G2 中，我们可以通过调整 adjust 的配置，将普通的柱状图变为分组柱状图,但是默认每个分组内的柱状图图形间是存在一定间距的。如下图所示：

上图的绘制代码：

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

const data = [
  { company: 'Apple', type: '整体', value: 30 },
  { company: 'Facebook', type: '整体', value: 35 },
  { company: 'Google', type: '整体', value: 28 },
  { company: 'Apple', type: '非技术岗', value: 40 },
  { company: 'Facebook', type: '非技术岗', value: 65 },
  { company: 'Google', type: '非技术岗', value: 47 },
  { company: 'Apple', type: '技术岗', value: 23 },
  { company: 'Facebook', type: '技术岗', value: 18 },
  { company: 'Google', type: '技术岗', value: 20 },
  { company: 'Apple', type: '技术岗', value: 35 },
  { company: 'Facebook', type: '技术岗', value: 30 },
  { company: 'Google', type: '技术岗', value: 25 },
];

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

chart.data(data);

chart.scale('value', { nice: true });

chart
  .interval()
  .position('type*value')
  .color('company')
  .adjust([
    {
      type: 'dodge',
    },
  ]);

chart.render();

如果想要更改默认间距的话，可以通过配置 marginRatio 的大小来实现

比如将各分组内图形的间距调整为 0

核心代码如下：

chart
  .interval()
  .position('type*value')
  .color('company')
  .adjust([
    {
      type: 'dodge',
+      marginRatio: 0,
    },
  ]);

总结一下

可以通过 adjust 的配置实现一些特殊图表，比如通过 geometry.adjust([{type: "dodge",marginRatio: 0,}]) 可以实现一个分组内图形间距为 0 的分组柱状图。type 属性一共支持 4 个值： stack | dodge | jitter | symmetric ，除了分组柱状图外，还可以可用于绘制层叠图、扰动图、分组图等。