antvis/G2

【v5】颜色分组柱,图例开关 X 轴会变导致作图变化(组合图场景下相当明显) #5384

Deathsteps posted onGitHub

问题描述

组合图关闭某个图例

单图也会发生变化,X 轴无法稳定 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-range <img width="539" alt="image" src="https://github.com/antvis/G2/assets/1549118/0a16b663-bfaa-41a3-8d62-ecd7fd123a44"> <img width="533" alt="image" src="https://github.com/antvis/G2/assets/1549118/798fdfa3-65ec-4c66-ab58-a3c2513f3e24">

期望结果

X 轴排序不发生变化,图例开关前后作图稳定

如何重现

https://g2.antv.antgroup.com/zh/examples/general/dual/#line-bar

官方代码修改

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

const data = [
  { time: '10:10', call: 4, waiting: 2, people: 2, type: 'a' },
  { time: '10:15', call: 2, waiting: 6, people: 3, type: 'b' },
  { time: '10:20', call: 13, waiting: 2, people: 5, type: 'a' },
  { time: '10:25', call: 9, waiting: 9, people: 1, type: 'b' },
  { time: '10:30', call: 5, waiting: 2, people: 3, type: 'a' },
  { time: '10:35', call: 8, waiting: 2, people: 1, type: 'b' },
  { time: '10:40', call: 13, waiting: 1, people: 2, type: 'a' },
  { time: '10:45', call: 13, waiting: 3, people: 4, type: 'b' },
];

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

chart.data(data);

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'waiting')
  .encode('color', 'type')
  .axis('y', { title: 'Waiting', style: { titleFill: '#5B8FF9' } });

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'people')
  .encode('shape', 'smooth')
  .style('stroke', '#fdae6b')
  .style('lineWidth', 2)
  .scale('y', { independent: true })
  .axis('y', {
    position: 'right',
    grid: null,
    title: 'People',
    style: {
      titleFill: '#fdae6b',
    },
  });

chart.render();

额外信息

  • G2 5.0.17 版本

另外,这个图例的小 icon 和图对不上号。就不单独提 issue 了,一起处理一下吧。

<img width="588" alt="image" src="https://github.com/antvis/G2/assets/1549118/9b76cfd0-cb51-4f2b-bc21-5e57dfc950ed">

posted by Deathsteps over 1 year ago

@Deathsteps legend 交互默认是 transform 数据筛选。 可以尝试 进行固定 scale.x.domain 进行x轴的固定。 image

posted by ai-qing-hai over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests