度量 - Scale
度量(Scale)用于定义数据的类型和展示方式,scale 有三种传入方式:
第一种 传入以字段名为 key,ScaleOption 为 value 的配置,同时设置多个字段的度量。
(field: Record<string, ScaleOption>) => View;
chart.scale({
sale: {
min: 0,
max: 100,
},
});
第二种 定义单个字段的度量,第一个参数为字段名,第二个参数为 ScaleOption。
(field: string, scaleOption: ScaleOption) => View;
chart.scale('sale', {
min: 0,
max: 100,
});
第三种 作为第一种和第二种的结合,第一个参数以字段名为 key,ScaleOption 为 value,第二个参数传入 ScaleOption 配置
(field: Record<string, ScaleOption>, scaleOption?: ScaleOption) => View;
chart.scale(
{
sale: {
min: 0,
max: 100,
},
},
{
nice: true,
}
);
ScaleOption 配置如下:
ScaleOption.type
声明度量类型:
度量类型 | 描述 |
---|---|
分类度量 | - cat: 分类度量 - timeCat: 时间分类度量 |
连续度量 | - linear: 线性度量 - time:连续的时间度量 - log: log 度量 - pow: pow 度量 - quantize:分段度量,用户可以指定不均匀的分段 - quantile: 等分度量,根据数据的分布自动计算分段 |
常量度量 | - identity: 常量度量 |
ScaleOption.key
用于声明使用数据记录中的哪些字段来组成一条数据的唯一 id(如有多个字段,则使用 '-' 连接)。G2 内部会有一套默认的 id 生成规则,如果不能满足用户需求,用户可以使用该属性配置 id。数据 id 用于标识 Element 图形元素,应用于 Geometry 中的图形元素 Element 更新。
下面的例子中,声明了将 'x' 和 'y' 字段的数值来作为每条数据记录的 id,即下面数据两条数据的 id 分别为:'1-23' 和 '2-2'。
const data = [
{ x: 1, y: 23, z: 'a' },
{ x: 2, y: 2, z: 'b' },
];
chart.scale({
x: { key: true },
y: { key: true },
});
ScaleOption.showLast
只对 type: 'cat'
以及 type: 'time-cat'
的 scale 生效,强制显示最后的 tick。注意:如果设置了 tickMethod
, 自定义 ticks 逻辑,会导致此配置失效。
ScaleOption.sync
chart.scale({
x: { sync: true },
y: { sync: true },
x1: { sync: 'x1' },
x2: { sync: 'x1' },
});
同步 scale。sync: boolean
即为 sync: [key],如上例中 x: { sync: true }
等同于 x: { sync: 'x' }
,y: { sync: true }
等同于 y: { sync: 'y' }
,所以,通过以上配置,会分别对 x 和 y 两个字段,x1 和 x2 两个字段进行同步度量操作。
ScaleOption.field
对应的字段属性名。
ScaleOption.values
输入域、定义域。
ScaleOption.range
[0, 1]
输出域、值域,表示在绘图范围内可用于绘制的范围。
ScaleOption.min
定义域的最小值,d3 为 domain,ggplot2 为 limits,分类型下无效。
ScaleOption.max
定义域的最大值,分类型下无效。
ScaleOption.minLimit
严格模式下的定义域最小值,设置后会强制 ticks 从最小值开始。
ScaleOption.maxLimit
严格模式下的定义域最大值,设置后会强制 ticks 以最大值结束。
ScaleOption.alias
数据字段的显示别名,scale 内部不感知,外部注入。
ScaleOption.base
log 有效,底数。
ScaleOption.exponent
pow 有效,指数。
ScaleOption.nice
自动调整 min、max 。
ScaleOption.ticks
用于指定 tick,优先级最高。
ScaleOption.tickInterval
tick 间隔,只对分类型和时间型适用,优先级高于 tickCount。
ScaleOption.minTickInterval
tick 最小间隔,只对 linear 适用。
ScaleOption.tickCount
5
tick 个数。
ScaleOption.maxTickCount
10
ticks 最大值。
ScaleOption.formatter
tick 格式化函数,会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。
ScaleOption.tickMethod
计算 ticks 的算法。
ScaleOption.mask
时间度量 time, timeCat 时有效。底层使用 fecha 进行日期的格式,所以对于 mask 的字符串可以直接参考其写法。