图例怎么居中显示呢

[YY88Xu]

问题描述

import { Chart } from '@antv/g2';

const chart = new Chart({
container: 'container',
autoFit: true,
});
const data = [
{
"month": "2023年1月",
"label": "R4",
"value": 10,
color: 'red',
},
{
"month": "2023年1月",
"label": "R5",
"value": 30,
color: 'yellow',
},
{
"month": "2023年1月",
"label": "R6",
color: 'green',
"value": 32
},
{
"month": "2023年2月",
"label": "R4",
color: 'red',
"value": 10
},
{
"month": "2023年2月",
"label": "R5",
color: 'yellow',
"value": 60
},
{
"month": "2023年2月",
"label": "R6",
color: 'green',
"value": 40
},
]
chart
.interval()
.data(data)
.transform({ type: 'stackY' })
.transform({ type: 'sortX', by: 'y', reverse: true })
.encode('x', 'month')
.encode('y', 'value')
.encode('color', 'color')

chart.render();

重现链接

No response

重现步骤

这个图例怎么设置居中显示呢？
.legend('color',
{
position: 'center',
})
会报错

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});
const data = [
  {
    month: '2023年1月',
    label: 'R4',
    value: 10,
    color: 'red',
  },
  {
    month: '2023年1月',
    label: 'R5',
    value: 30,
    color: 'yellow',
  },
  {
    month: '2023年1月',
    label: 'R6',
    color: 'green',
    value: 32,
  },
  {
    month: '2023年2月',
    label: 'R4',
    color: 'red',
    value: 10,
  },
  {
    month: '2023年2月',
    label: 'R5',
    color: 'yellow',
    value: 60,
  },
  {
    month: '2023年2月',
    label: 'R6',
    color: 'green',
    value: 40,
  },
];
chart
  .interval()
  .data(data)
  .transform({ type: 'stackY' })
  .transform({ type: 'sortX', by: 'y', reverse: true })
  .encode('x', 'month')
  .encode('y', 'value')
  .encode('color', 'color')
  .legend('color', {
    layout: { justifyContent: 'center' }, // 这里
  });