设置堆叠图数据显示顺序 #6040
YY88Xu posted onGitHub
问题描述
<img width="1618" alt="image" src="https://github.com/antvis/G2/assets/14836228/5a25d5d5-930c-46f1-8dd9-d48be092f9aa"> 如图,London 数据可以显示在 Berlin 数据上面吗?但是图例也是显示 London 再显示 Berlin。 出了自定义图例,还有其他方法吗?
重现链接
No response
重现步骤
No response
预期行为
import { Chart } from '@antv/g2';
const data = [ { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, { name: 'London', 月份: 'May', 月均降雨量: 47 }, { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, ];
const chart = new Chart({ container: 'container', autoFit: true, });
chart .interval() .data(data) .encode('x', '月份') .encode('y', '月均降雨量') .encode('color', 'name') .transform({ type: 'stackY' }) .transform({ type: 'normalizeY' }) .interaction('elementHighlight', { background: true });
chart.render();
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
屏幕截图或视频(可选)
No response
补充说明(可选)
No response