antvis/G2

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

KuduroJS posted onGitHub

image

类似效果如上图。

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

谢谢。


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

image

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();
posted by pearmini about 2 years ago

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

image

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,:)

posted by KuduroJS about 2 years ago

Fund this Issue

$0.00
Funded

Pull requests