🤔 [QUESTION] 请问如何设置堆叠分组柱状图的图表标注???
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 591
- PR merge metrics
- No merged PRs in 30d
Description

测试代码:
import { Column } from '@antv/g2plot';
// 示例数据
const data = [
{ year: '1991',category:'正常', type: 'H1', value: 3 },
{ year: '1991',category:'不正常', type: 'H1', value: 1 },
{ year: '1991',category:'正常', type: 'H3', value: 3 },
{ year: '1991',category:'不正常', type: 'H3', value: 3 },
{ year: '1991',category:'正常', type: 'QT33', value: 3 },
{ year: '1991',category:'不正常', type: 'QT33', value: 4 },
{ year: '1992',category:'正常', type: 'H1', value: 3 },
{ year: '1992',category:'不正常', type: 'H1', value: 7 },
{ year: '1992',category:'正常', type: 'H3', value: 3 },
{ year: '1992',category:'不正常', type: 'H3', value: 8 },
{ year: '1992',category:'正常', type: 'QT33', value: 6 },
{ year: '1992',category:'不正常', type: 'QT33', value: 9 },
{ year: '1993',category:'正常', type: 'H1', value: 3 },
{ year: '1993',category:'不正常', type: 'H1', value: 8 },
{ year: '1993',category:'正常', type: 'H3', value: 8 },
{ year: '1993',category:'不正常', type: 'H3', value: 5 },
];
// 创建堆叠柱状图
const plot = new Column('container', {
data,
isStack: true,
isGroup:true,
xField: 'year',
yField: 'value',
seriesField: 'category',
groupField: 'type',
label: {
position: 'middle',
layout: [
{ type: 'interval-adjust-position' },
{ type: 'interval-hide-overlap' },
{ type: 'adjust-color' },
],
},
annotations: [
{
type: 'text',
position: ['1991', 6], // 第一个注释的位置
content: '1991年数据', // 第一个注释的内容
style: { textAlign: 'center', fontSize: 14, fill: 'rgba(0,0,0,0.85)' },
offsetY: -10, // 垂直方向偏移量
},
{
type: 'text',
position: ['1995', 10], // 第二个注释的位置
content: '1995年数据', // 第二个注释的内容
style: { textAlign: 'center', fontSize: 14, fill: 'rgba(0,0,0,0.85)' },
offsetY: -10, // 垂直方向偏移量
},
{
type: 'text',
position: ['1999', 14], // 第三个注释的位置
content: '1999年数据', // 第三个注释的内容
style: { textAlign: 'center', fontSize: 14, fill: 'rgba(0,0,0,0.85)' },
offsetY: -10, // 垂直方向偏移量
},
],
});
plot.render();
Contributor guide
Research direction
Start with the Column configuration shown in the issue, focusing on the isStack, isGroup, groupField, label, and annotations options. Check the existing annotation and grouped-column behavior to determine whether the requested labels are supported; done requires a clear working configuration or a documented limitation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100