antvis/G2

设置堆叠图数据显示顺序 #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


.transform({ type: 'stackY', reverse: true }) 设置 reverse 为 true,看源码自己找到的

posted by YY88Xu over 1 year ago

已解决

posted by YY88Xu over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests