Skip to content

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

@wangfei9999

Description

@wangfei9999

Image
测试代码:
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();

Metadata

Metadata

Assignees

No one assigned

    Labels

    QuestionFurther information is requested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions