G2
G2 copied to clipboard
期望annotation能够支持新的参数,满足在某些场景下根据当前view状态决定显示隐藏的功能
- [ ] I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
https://codepen.io/KedAyAyA/pen/ExNrJyX?editors=0010
Steps to reproduce
- 点击London的图例
- 绿色线隐藏,但是标注信息仍然存在
期望可以隐藏针对该 图元 生成的对应London趋势线以及对该条线上某一点的标注
| Environment | Info |
|---|---|
| g2 | 4.1.12 |
| System | mac |
| Browser | any |
从技术及图表层设计上看,geom与annotation确实没有任何关系,并且annotation支持的参数其实是用来确定在图上位置的,与是否隐藏线并没有任何关系。
这种需求一般是从业务角度出发的,我们使用图例对某个维度进行筛选后,自然也期望我们从业务关联的所有annotation组件一并取消显示,否则其实会带来展示上的误区。
目前来看没有很好的办法能够有效的支撑这类需求,但有两个大概的思路
- 监听legend的click回调,然后结合业务场景找到对应的annotation compont,去hide掉。但其实也涉及了较多底层逻辑,不看源码基本无法实现
- 增加一个实时回调参数,可以在annotation决定创建 or 渲染的时候,根据当时的view层状态进行判断(filteredData看过滤掉了哪些数据)再决定显示隐藏。
两个想法不知道与整个技术设计方案是否有些冲突
合理的方案,还是 1,但是目前来做比较蹩脚,原因是没有办法拿到当前哪些 legend 选中了。如果是方案 2 使用上是比较方便了,但是感觉确实设计上有一些违背了。
在 5.0 中会强化 1 的方案,而不会保留方案 2.
是的,而且方案1在查找 对应annotation component的时候 和 hide的时候都需要对底层有一定的了解,成本还是比较高的。
方案2确实比较方便了,而且可能不仅仅针对这个case,任意update的时候都可以按照当前view的状态判断,是否可以考虑先支持一下呢?
G2 5.0 可以解决这个问题,给 text mark 加上 color encode 即可:
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.options({
type: 'view',
data: [
{ month: 'Jan', city: 'Tokyo', temperature: 7 },
{ month: 'Jan', city: 'London', temperature: 3.9 },
{ month: 'Feb', city: 'Tokyo', temperature: 6.9 },
{ month: 'Feb', city: 'London', temperature: 4.2 },
{ month: 'Mar', city: 'Tokyo', temperature: 9.5 },
{ month: 'Mar', city: 'London', temperature: 5.7 },
{ month: 'Apr', city: 'Tokyo', temperature: 14.5 },
{ month: 'Apr', city: 'London', temperature: 8.5 },
{ month: 'May', city: 'Tokyo', temperature: 18.4 },
{ month: 'May', city: 'London', temperature: 11.9 },
{ month: 'Jun', city: 'Tokyo', temperature: 21.5 },
{ month: 'Jun', city: 'London', temperature: 15.2 },
{ month: 'Jul', city: 'Tokyo', temperature: 25.2 },
{ month: 'Jul', city: 'London', temperature: 17 },
{ month: 'Aug', city: 'Tokyo', temperature: 26.5 },
{ month: 'Aug', city: 'London', temperature: 16.6 },
{ month: 'Sep', city: 'Tokyo', temperature: 23.3 },
{ month: 'Sep', city: 'London', temperature: 14.2 },
{ month: 'Oct', city: 'Tokyo', temperature: 18.3 },
{ month: 'Oct', city: 'London', temperature: 10.3 },
{ month: 'Nov', city: 'Tokyo', temperature: 13.9 },
{ month: 'Nov', city: 'London', temperature: 6.6 },
{ month: 'Dec', city: 'Tokyo', temperature: 9.6 },
{ month: 'Dec', city: 'London', temperature: 4.8 },
],
encode: {
x: 'month',
y: 'temperature',
color: 'city',
},
children: [
{ type: 'line' },
{ type: 'point', style: { shape: 'point' } },
{
type: 'text',
data: ['Jul', 17],
encode: {
text: '当前点London温度最高',
color: 'London', // 加上 color encode
},
style: { fill: '#000' },
},
],
});
chart.render();
不过有点小的 bug,可以更进这个 issue:https://github.com/antvis/G2/issues/5506