antvis/G2
The issue has been closed
如果name重复了柱状图的显示就会有问题 #5825
18211365467 posted onGitHub
问题描述
/**
* A recreation of this demo: https://observablehq.com/@d3/grouped-bar-chart
*/
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.title({
title: 'Population by age and state',
subtitle: 'It shows the population of U.S. by age and state.',
});
const data=[
{name:'我',id:1,ids:3},
{name:'我1',id:2,ids:3},
{name:'我2',id:2,ids:3},
{name:'我1',id:22,ids:3},
{name:'我2',id:24,ids:3},
{name:'我3',id:3,ids:3},
{name:'我4',id:5,ids:3},
{name:'我5',id:8,ids:3},
{name:'我6',id:9,ids:3}
]
chart
.interval()
.data(data)
.transform({ type: 'sortX', by: 'y', reverse: true, slice: 6 })
.transform({ type: 'dodgeX' })
.encode('x', 'name')
.encode('y', 'id')
.encode('color', 'ids')
.scale('y', { nice: true })
.axis('y', { labelFormatter: '~s' });
chart
.interaction('tooltip', { shared: true })
.interaction('elementHighlightByColor', { background: true });
chart.render();
重现链接
No response
重现步骤
No response
预期行为
No response
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
屏幕截图或视频(可选)
No response
补充说明(可选)
No response