笔记

Appearance

大纲

坐标尺度 ​

坐标系 ​

视觉通道中辨识度最高的是位置，将数据转换为位置信息的依据为坐标系，常见的坐标系为

  • 直角坐标系
  • 极坐标系
  • 质心坐标系：使用三角形的三个顶点求得坐标点 u,v,w 且 w = 1-u-v，该坐标系常用于三维绘图中，这里暂不考虑

设置坐标系 ​

chart.coordinate(corrdinate), 其中 corrdinate 可取

  • rect|cartesian: 直角坐标系，默认的坐标系
  • polar: 极坐标系，由角度和半径确定位置
  • theta: 极坐标系，半径固定，仅映射角度(等同于 chart.coordinate('polar').transpose())
  • helix: 螺旋坐标系

坐标变换 ​

js
coordinate.ratate(Math.PI); // 旋转
coordinate.scale(rx, ry); // 缩放
coordinate.transpose(); // 坐标轴置换/对角变换
coordinate.reflect("x" | "y"); // 沿x或y方向进行映射(镜像)

应用示例 ​

ts
import { Chart } from "@antv/g2";
const data = new Array(10)
  .fill(undefined)
  .map((v, i) => ({ x: "i" + i, y: 50 + parseInt("" + Math.random() * 50) }));
const chart = new Chart({
  container: "chart",
  width: 500,
  height: 500,
});
const isPie = false;
if (isPie) {
  // 饼图
  chart.coordinate("theta");
  chart.interval().position("y").color("x").adjust("stack");
} else {
  // 玫瑰图
  chart.coordinate("polar");
  chart.interval().position("x*y").color("x").adjust("stack");
}
chart.data(data);
chart.render();

度量 ​

度量是数据映射到坐标的关系，其影响图表、坐标刻度、图例展示、格式化数据等表现展示

配置方式

  • chart.scale(defs: object): 同时配置多个维度，如 chart.scale({ x: { min: 0 }, y: { min: 0 } })
  • chart.scale(field: string, cfg: object): 针对单个维度进行配置，如 chart.scale('x', { min: 0 })

获取配置

  • chart.getScalesByDim("x"): 获取 x 轴的度量
  • chart.getScalesByDim("y"): 获取 y 轴的度量, 多轴图存在多个度量
  • chart.getScaleByField(field): 根据字段名获取度量

度量类型 ​

  • 连续: linear, log, pow, time, quantize, quantile
    • quantize: 分段度量，将某些区间的数值映射到一个值上
    • quantile: 等分度量，根据数据分布自动计算分段
  • 离散: cat, timeCat
    • cat: 分类度量(category)
    • timeCat: 时间分类度量
  • 常量: identity

默认的处理流程

  1. 查看是否定制了对应字段的数据类型(type 字段)
  2. 若未定制，则判断字段的第一条数据的字段类型
    • 若为数字：linear
    • 若不存在：identity
    • 若为字符串：判断是否为时间格式
      • 时间格式：time
      • 分类类型：cat

配置选项 ​

TODO:

  • type: string: 度量类型
  • values: any[]: 定义域
  • min: any: 定义域最小值
  • max: any: 定义域最大值
  • range: [number, number]: 值域
  • tickCount: number: 期望的 tick 数量
  • formatter: (value, index) => void: 格式化函数，用于 tooltip, tick 展示
  • tickMethod: string | scale => ticks: 计算 ticks 方法
    • wilkinson-extended: 计算数字 ticks 的方法，linear 类型内置的计算方式
    • r-pretty: 计算数字 ticks 的方法, 展示效果会更好
    • time: 计算时间 ticks 的方法
    • time-pretty: 计算时间 ticks 的方法，展示效果会更好
    • log: 计算数字 ticks 的方法，生成类似 [0, 1e1, 1e2, 1e3] 的 ticks
    • pow: 计算数字 ticks 的方法，生成类似 [0, 4, 9, 16] 的 ticks
    • quantile: 计算数字的 ticks 方法，根据统计学上的几分位概念计算 ticks
  • alias: string: 显示在坐标轴、图例上的标题
ts
type ScaleConfig = Partial<{
  /** 对应的字段id */
  field: string;
  /** 输入域、定义域 */
  values: any[];
  /** 定义域的最小值，d3为domain，ggplot2为limits，分类型下无效 */
  min: any;
  /** 定义域的最大值，分类型下无效 */
  max: any;
  /** 严格模式下的定义域最小值，设置后会强制 ticks 从最小值开始 */
  minLimit?: any;
  /** 严格模式下的定义域最大值，设置后会强制 ticks 已最大值结束 */
  maxLimit?: any;
  /** 数据字段的显示别名，scale内部不感知，外部注入 */
  alias: string;
  /** 输出域、值域，默认值为[0, 1] */
  range: number[];
  /** Log有效，底数 */
  base: number;
  /** Pow有效，指数 */
  exponent: number;
  /** 自动调整min、max */
  nice: boolean;
  /** 用于指定tick，优先级最高 */
  ticks: any[];
  /** tick间隔，只对分类型和时间型适用，优先级高于tickCount */
  tickInterval: number;
  /** tick最小间隔，只对线型适用 */
  minTickInterval: number;
  /** tick个数，默认值为5 */
  tickCount: number;
  /** ticks最大值，默认值为10 */
  maxTickCount: number;
  /** tick格式化函数，会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示 */
  formatter: (v: any, k?: number) => any;
  /** 计算 ticks 的算法 */
  tickMethod: string | TickMethod;
  /** 时间度量 time, timeCat 时有效 */
  mask?: string;
}>;

应用示例 ​

ts
import { Chart } from "@antv/g2";
const data = [
  { x: 1, y: 1 },
  { x: 2, y: 4 },
  { x: 3, y: 9 },
];
const chart = new Chart({
  container: "chart",
  width: 600,
  height: 300,
});
chart.scale({
  x: { min: 0, type: "linear" },
  y: { min: 0, type: "pow", tickCount: 3 },
});
chart.line().position("x*y");
chart.data(data);
chart.render();