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

[18211365467]

AntV Open Source Contribution Plan（可选）

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

Issue 类型

高级任务

任务介绍

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

/**
 * 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 的出错
• 相关代码：

  G2/src/runtime/layout.ts

  Line 70 in c525480

  export function computeLayout(

[pearmini]

提供代码

[18211365467]

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

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

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: 'sortX', by: 'y', reverse: true, slice: 6 })
  .transform({ type: 'dodgeX' })
  .encode('x', 'state')
  .encode('y', 'population')
  .encode('color', 'state')
  .scale('y', { nice: true })
  .axis('y', { labelFormatter: '~s' })
  .legend('color',{
    position:'left',
  })
chart
  .interaction('tooltip', { shared: true })
  .interaction('elementHighlightByColor', { background: true });

chart.render();

[BENcorry]

【BENcorry 认领】

[pearmini]

closed by: #5945