antvis/G2
posted by pearmini about 2 years ago
posted by KuduroJS about 2 years ago
The issue has been closed
【问题】请问有办法实现x轴多级分组图表吗 #4724
KuduroJS posted onGitHub
类似效果如上图。
以及,求一个有官方或者前端小伙伴的g2交流群。
谢谢。
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();
posted by pearmini about 2 years ago
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,:)