度量 - Scale

阅读时间约 5 分钟

度量(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

string optional

声明度量类型:

度量类型描述
分类度量- cat: 分类度量
- timeCat: 时间分类度量
连续度量- linear: 线性度量
- time:连续的时间度量
- log: log 度量
- pow: pow 度量
- quantize:分段度量,用户可以指定不均匀的分段
- quantile: 等分度量,根据数据的分布自动计算分段
常量度量- identity: 常量度量

ScaleOption.key

boolean optional

用于声明使用数据记录中的哪些字段来组成一条数据的唯一 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

boolean optional

只对 type: 'time' 的 scale 生效,强制显示最后的日期 tick。

ScaleOption.sync

boolean | string optional
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

string optional

对应的字段属性名。

ScaleOption.values

any[] optional

输入域、定义域。

ScaleOption.range

[number, number] optional default: [0, 1]

输出域、值域,表示在绘图范围内可用于绘制的范围。

ScaleOption.min

any optional

定义域的最小值,d3 为 domain,ggplot2 为 limits,分类型下无效。

ScaleOption.max

any optional

定义域的最大值,分类型下无效。

ScaleOption.minLimit

any optional

严格模式下的定义域最小值,设置后会强制 ticks 从最小值开始。

ScaleOption.maxLimit

any optional

严格模式下的定义域最大值,设置后会强制 ticks 以最大值结束。

ScaleOption.alias

string optional

数据字段的显示别名,scale 内部不感知,外部注入。

ScaleOption.base

number optional

log 有效,底数。

ScaleOption.exponent

number optional

pow 有效,指数。

ScaleOption.nice

boolean optional

自动调整 min、max 。

ScaleOption.ticks

any[] optional

用于指定 tick,优先级最高。

ScaleOption.tickInterval

number optional

tick 间隔,只对分类型和时间型适用,优先级高于 tickCount。

ScaleOption.minTickInterval

number optional

tick 最小间隔,只对 linear 适用。

ScaleOption.tickCount

number optional default: 5

tick 个数。

ScaleOption.maxTickCount

number optional default: 10

ticks 最大值。

ScaleOption.formatter

(v: any, k?: number) => any optional

tick 格式化函数,会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。

ScaleOption.tickMethod

string | TickMethod optional

计算 ticks 的算法。

ScaleOption.mask

string optional

时间度量 time, timeCat 时有效。底层使用 fecha 进行日期的格式,所以对于 mask 的字符串可以直接参考其写法。