antvis/G2

【v5】shape 通道指定后,legend 位置设置失效 #5015

Deathsteps posted onGitHub

问题描述

<img width="1149" alt="image" src="https://github.com/antvis/G2/assets/1549118/7bd0f4f3-f661-468d-a484-293e33b21b59"> <img width="1086" alt="image" src="https://github.com/antvis/G2/assets/1549118/ebc3af6a-e01f-4a62-b0b6-70d084069b0d">

期望结果

shape encode 不影响图例位置设置

如何重现

官方示例修改

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

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

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  })
  .transform({ type: 'stackY' })
  .transform({ type: 'sortX', by: 'y', reverse: true })
  .encode('x', 'state')
  .encode('y', 'population')
  .encode('color', 'age')
  .axis('x', {
    labelSpacing: 4,
    style: {
      labelTransform: 'rotate(90)',
    },
  })
  .encode('shape', 'hollow')
  .legend('color', {
    position: 'bottom',
  })
  .axis('y', { labelFormatter: '~s' });

chart.render();

额外信息

G2 5.0.4


这确实是一个问题,应该是现在的 legend 是和 color 和 shape 同时绑定了,所以导致配置失效。

posted by pearmini almost 2 years ago

看了代码,当前获取 legend 数据的方式,基本无解,一定会触发 bug。

posted by hustcc almost 2 years ago

喵喵叹气

posted by Deathsteps almost 2 years ago

喵喵叹气

暂时可以这样解决:

// 用 mark.style 代替 mark.shape
chart.interval().style('shape', 'hollow');
posted by pearmini almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests