水平圆角柱状图

当 coordinate 转置之后，圆角展示不正确

问题复现

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

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

chart.coordinate({ transform: [{ type: 'transpose' }] });

chart
  .interval()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/penguins.json',
  })
  .transform({ type: 'groupColor', y: 'count' })
  .transform({ type: 'stackY' })
  .transform({ type: 'normalizeY' })
  .axis('y', { labelFormatter: '.0%' })
  .encode('color', 'sex')
  .label({ text: 'sex', position: 'inside' })
  .tooltip({ channel: 'y', valueFormatter: '.0%' })
  .style('radius', 10);

chart.render();

问题原因

interval 的 shape 在绘制圆角的时候没有考虑转置的情况。

// src/shape/interval/color.ts

const extendedStyle = {
  radius,
  radiusTopLeft: first ? radiusTopLeft : innerRadiusTopLeft, // 需要考虑转置
  radiusTopRight: first ? radiusTopRight : innerRadiusTopRight,
  radiusBottomRight: last ? radiusBottomRight : innerRadiusBottomRight,
  radiusBottomLeft: last ? radiusBottomLeft : innerRadiusBottomLeft,
  inset,
  insetLeft,
  insetRight,
  insetBottom,
  insetTop,
};

解决步骤

新增一个测试例子，参考这个例子：__tests__/plots/static/penguins-interval-group-color.ts

版本

5.0.0-rc.1