antvis/G2


The issue has been closed
【v5】颜色分组柱,图例开关 X 轴会变导致作图变化(组合图场景下相当明显) #5384
Deathsteps posted onGitHub
问题描述
组合图关闭某个图例
关闭前
<img width="551" alt="image" src="https://github.com/antvis/G2/assets/1549118/96c7b264-4fb6-4153-98e5-c0bb9f947fce">
关闭后
<img width="557" alt="image" src="https://github.com/antvis/G2/assets/1549118/c466f76e-6a8a-43dd-99e3-aed80a7c83bb">
单图也会发生变化,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 版本