-
Notifications
You must be signed in to change notification settings - Fork 601
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();