antvis / antvis/G2Plot

🤔 [QUESTION] 请问如何设置堆叠分组柱状图的图表标注???

Open
#3,846 0 comments 0 reactions 0 assignees View on GitHub
Question
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

![Image](https://github.com/user-attachments/assets/48ac7c1f-915c-45a1-bff6-c83b09749140)
测试代码:
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.