借助图形标注展示总计 label
import { Column } from '@antv/g2plot';
// 也可以在项目中直接使用 lodash
import { each, groupBy } from '@antv/util';
fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
.then((data) => data.json())
.then((data) => {
const annotations = [];
each(groupBy(data, 'year'), (values, k) => {
const value = values.reduce((a, b) => a + b.value, 0);
annotations.push({
type: 'text',
position: [k, value],
content: `${value}`,
style: { textAlign: 'center', fontSize: 14, fill: 'rgba(0,0,0,0.85)' },
offsetY: -10,
});
});
const plot = new Column('container', {
data,
isStack: true,
xField: 'year',
yField: 'value',
seriesField: 'type',
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
// 使用 annotation (图形标注)来展示:总数的 label
annotations,
});
plot.render();
});
// 数据源 data
[
{
"year": "1991",
"value": 3,
"type": "Lon"
},
{
"year": "1992",
"value": 4,
"type": "Lon"
},
{
"year": "1993",
"value": 3.5,
"type": "Lon"
},
{
"year": "1994",
"value": 5,
"type": "Lon"
},
{
"year": "1995",
"value": 4.9,
"type": "Lon"
},
{
"year": "1996",
"value": 6,
"type": "Lon"
},
{
"year": "1997",
"value": 7,
"type": "Lon"
},
{
"year": "1998",
"value": 9,
"type": "Lon"
},
{
"year": "1999",
"value": 13,
"type": "Lon"
},
{
"year": "1991",
"value": 3,
"type": "Bor"
},
{
"year": "1992",
"value": 4,
"type": "Bor"
},
{
"year": "1993",
"value": 3.5,
"type": "Bor"
},
{
"year": "1994",
"value": 5,
"type": "Bor"
},
{
"year": "1995",
"value": 4.9,
"type": "Bor"
},
{
"year": "1996",
"value": 6,
"type": "Bor"
},
{
"year": "1997",
"value": 7,
"type": "Bor"
},
{
"year": "1998",
"value": 9,
"type": "Bor"
},
{
"year": "1999",
"value": 13,
"type": "Bor"
}
]
效果图: