【问题】请问有办法实现x轴多级分组图表吗

[KuduroJS]

类似效果如上图。

以及，求一个有官方或者前端小伙伴的g2交流群。

谢谢。

[pearmini]

v5 版本这里有一个简单的例子：

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

const chart = new Chart({
  container: 'container',
  paddingLeft: 50,
});

const data = [
  { sex: 'male', age: 30, class: 'A', single: false },
  { sex: 'male', age: 25, class: 'A', single: true },
  { sex: 'male', age: 60, class: 'B', single: false },
  { sex: 'male', age: 35, class: 'B', single: true },
  { sex: 'female', age: 40, class: 'A', single: false },
  { sex: 'female', age: 28, class: 'A', single: true },
  { sex: 'female', age: 34, class: 'B', single: false },
  { sex: 'female', age: 50, class: 'B', single: true },
];

const facet = chart
  .facetRect()
  .data(data)
  .encode('x', 'sex')
  .legend('color', { position: 'right', size: 50 })
  .axis('x', { position: 'bottom', tick: false });

facet
  .interval()
  .attr('paddingBottom', 10)
  .transform({ type: 'dodgeX' })
  .encode('x', 'class')
  .encode('color', 'single')
  .encode('y', 'age')
  .axis('x', { title: '' })
  .attr('frame', false);

chart.render();

[pearmini]

[KuduroJS]

v5 版本这里有一个简单的例子：

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

const chart = new Chart({
  container: 'container',
  paddingLeft: 50,
});

const data = [
  { sex: 'male', age: 30, class: 'A', single: false },
  { sex: 'male', age: 25, class: 'A', single: true },
  { sex: 'male', age: 60, class: 'B', single: false },
  { sex: 'male', age: 35, class: 'B', single: true },
  { sex: 'female', age: 40, class: 'A', single: false },
  { sex: 'female', age: 28, class: 'A', single: true },
  { sex: 'female', age: 34, class: 'B', single: false },
  { sex: 'female', age: 50, class: 'B', single: true },
];

const facet = chart
  .facetRect()
  .data(data)
  .encode('x', 'sex')
  .legend('color', { position: 'right', size: 50 })
  .axis('x', { position: 'bottom', tick: false });

facet
  .interval()
  .attr('paddingBottom', 10)
  .transform({ type: 'dodgeX' })
  .encode('x', 'class')
  .encode('color', 'single')
  .encode('y', 'age')
  .axis('x', { title: '' })
  .attr('frame', false);

chart.render();

谢谢您的回复，我看一下相关文档和示例。

说到v5版本，我们公司正在开发一个低代码的BI系统，虽然我很希望用v5版本，但在生产环境可以吗，是否稳定，离正式版还有多久？希望听听您的意见。

另外，您的群链接失效了hhh，：）