图例定位左侧后maxRows失效，maxCol显示有问题 #5724

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

高级任务

任务介绍

使得以下图表图例正常绘制：

<img width="708" alt="image" src="https://github.com/antvis/G2/assets/49330279/b4dac234-de4f-4a8c-bf8a-803b370e8587">

/**
 * A recreation of this demo: https://observablehq.com/@d3/bar-chart
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.title({
  title: 'Population by age and state',
  subtitle: 'It shows the population of U.S. by age and state.',
});

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  })
  .transform({ type: 'dodgeX' })
  .encode('x', 'age')
  .encode('y', 'population')
  .encode('color', 'state')
  .scale('y', { nice: true })
  .axis('y', { labelFormatter: '~s' })
  .legend('color',{
    position:'left',
    maxCols: 3,
  })

chart
  .interaction('tooltip', { shared: true })
  .interaction('elementHighlightByColor', { background: true });

chart.render();

参考说明

出现问题的可能原因：

• 布局的时候没有考虑到 title
• 计算 cols 和 rows 的出错
• 相关代码：https://github.com/antvis/G2/blob/c5254809a2b3d31c964579e14e465e9feb307ebd/src/runtime/layout.ts#L70