G2Plot
G2Plot copied to clipboard
antvis
🥰 [FEATURE] color 函数回调参数过少 希望提供 index
🥰 Features description
折线图为例 根据 Api 文档 https://antv-g2plot.gitee.io/zh/docs/api/plots/line#color color 支持 Function 返回颜色 ，但参数过少，希望提供 index
const COLOR_MAP = {
A: "red",
B: "yellow",
C: "blue"
}
{
colorField: 'type', // 部分图表使用 seriesField
color: (typeData ,d2,d3,d4) => {
const { type } = typeData ; // <---- typeData 中只含有参数 type , d2 d3 d4 都是 undefined
return COLOR_MAP[type] // <--- 必须 1:1 精确匹配，返回 undefined 的颜色会都为 默认色 #5B8FF9
}
}
}
🏞 What problem does this feature solve
在一个页面有大量图表时，可能需要对其中相同 部分 Type 指定一致的颜色，那么只能使用 Function 方式，根据 Type 指定颜色。
但是使用 Function 必须精确 1 对 1 建立 COLOR_MAP，
初期 Type 可能只有 [A B C]，后续可能会有 [ABC DEF...]
或者 甲图表有 Type [ A B C X Y Z] ，乙图表有 [ A B C J Q K]，只想 ABC一致，其他 随机
但 COLOR_MAP 必须 1:1 的匹配，不然返回 undefined 就会回退到默认颜色 #5B8FF9，导致 DEF XYZ JQK全部是同一个颜色 #5B8FF9
我希望能 function 中提供 type 的 index 让用户能自行处理 其他 颜色。
我观察到如果 color 赋值类型是 string[] 的话，会按照顺序依次读取 string[] 的颜色进行赋值，内部实现应该是这样的
const colorPad = [red,yellow,blue,green];
{
color: colorPad,
}
function colorStringArrHandle(colorPad, typeIndex){
return colorPad[ typeIndex % colorPad.length ];
}
所以 Function 中能不能也提供 typeIndex，那样我就可以对 其他 颜色进行同样的处理。
const COLOR_MAP = {
A: "red",
B: "yellow",
C: "blue"
}
const COLOR_PAD = [ aqua, skyblue, pink ];
{
colorField: 'type', // 部分图表使用 seriesField
color: ( {type} , typeIndex ) => {
if ( type in COLOR_MAP){
return COLOR_MAP[type];
}else {
return COLOR_PAD[ typeIndex % COLOR_PAD.length ]
}
}
}
}
🧐 What does the proposed API look like
{
color: function( typeData, typeIndex ){
....
}
}
这个诉求要等到下个版本升级，提供
谢谢，不过这个和 https://github.com/antvis/G2Plot/issues/2646 有区别。这个是图表的 color 的回调，那个是关于 点 的 color 回调~ 好绕...
新版已经有 index 参数了。但是通过 colorMap 映射数据的方式不推荐，更好的是使用 scale。
// 这是 5.0 里面的用法
chart.scale('color', {
range: ["red", "yellow", "blue", "aqua", "skyblue", "pink" ]
});
这样对于种类集合 [A B C] 和 [ A B C X Y Z]，前三个会根据 index 映射为 ["red", "yellow", "blue"]，[X Y Z] 会被映射为 ["aqua", "skyblue", "pink"]。
4.0 里面也有相应的能力，可以去比例尺相关的文档看一下。
新版指的是 G2Plot 么，我在目前最新的 2.4.20 没有看到 index
因为是两个图表中相同 type 保持颜色一致， 但两个图表产生的的 `Type` 集合顺序极大可能是不一致的
可能甲图表顺序是 [ y h B A C p]，乙是 [ A m n C B ]， 因此按顺序的数组应该是无法满足要求，只能 Map 映射了。
Map 1:1 映射导致的问题就是需要一个兜底的方案，目前我想到的就是取一个 ColorPad，去掉 Map 匹配到且使用过的颜色，然后数组顺序循环取数。
G2 5.0是不是也增加 map 的选项
chart.scale('color', {
range: ["red", "yellow", "blue", "aqua", "skyblue", "pink" ],
map: [ { A:'red' } ] // 如果 typeArr.includes( A )，将 'red' 从 range 中删掉
});
4.0 里面也有相应的能力，可以去比例尺相关的文档看一下。
我没有找到 G2 中 比例尺 的文档，我想您应该说的是 Scale 度量 吧，https://g2.antv.vision/zh/docs/manual/tutorial/scale/
我如何创建一个 G2 的 Scale 作用在 new Line(elm, {color: $G2_Scale }) 属性上呢 ?
- G2Plot 里面比例尺的使用可以看这里：https://g2plot.antv.vision/zh/docs/api/options/meta
- index 配置 G2Plot 和 G2 4.0 都还没有支持。
map 这个提议挺好的，因为确实也有用户说只是希望指定某些 type 的颜色，其他的走默认的映射逻辑，使用的方式可能大概如下：
chart.scale('color', {
range: ["red", "yellow", "blue", "aqua", "skyblue", "pink" ],
map: [['A', 'white']]
});
之所以用数组去描述这个映射关系，主要有以下几点考虑：
- 不用 Object：在这种情况下 color 是 Ordinal 比例尺，domain 可能不是 String、Number 这些 Primitive，而是 Object、Date 对象这些，而这些事没有办法作为 object 的 key 的。
- 不用 Map：
new Map的 key 可以是任意值，但是 Map 对象不方便序列化，不适合 G2 5.0 底层的 spec 去描述图表。
所以这里需要做的是对 @antv/scale 里面的 ordinal 比例尺进行升级，让它支持 map 这个配置，大概对使用方式如下：
import { Ordinal } from '@antv/scale';
const scale = new Ordinal({
domain: ['a', 'b', 'c'],
range: ['red', 'yellow', 'black'],
map: [['I am special', 'white']]
});
scale.map('I am special'); // 'white'
scale.map('a'); // 'red'
scale.map('b'); // 'yellow'
这样 G2 和 G2Plot 后续升级的时候就可以使用这个特性。
@lqzhgood 有没有兴趣来实现这个 feature，给 @antv/scale 提一个 PR？这个 feature 比较小，实现起来难度也不大，但是可以大大地增加用户体验！ 🤣
