几何图形 ​

视觉通道中几何标记对应的点线面体的几何标记维度为 0、1、2、3
根据图形维度和自由度(= 空间维度 - 几何标记维度)将几何标记进行如下分类

• point(点图): 通常只映射一个字段到点的 size 上，在 x 和 y 方向同时扩展大小
• path(路径图), line(线图): x 方向无序的线是 path，有序的线是 line
• area(区域图): 填充折线和 x 轴闭合的区域
• interval(区间图): 常见如 直方图、玫瑰图、饼图
• polygon(多边形):
• heatmap(热力图):
• schema(自定义): 如 K 线图、箱型图

图表类型和图形形状

• 点图：可以使用 圆、三角、方形、符号等表示
• 线图：可以使用 折现、曲线、点线等
• 多边形：可以使用 实心或空心表示

如何设计 shape

• 支持的视觉通道
• 映射到各视觉通道的数据格式
• 图形对应的数据
• 图形的点个数

支持的视觉通道

• position: 所有图表都支持
• color: 所有图表都支持，由 shape 决定填充边框还是图形
• size: 由几何标记的自由度决定

接受的数据格式：JSON 数组，每条数据格式支持两种类型

• 数值、字符串等标量
• 数组、多个标量构成的数组

说明: 数值数组一般用于表示区间值，常用在 区间图、等叠图 中

点图 ​

点图是一种表现数据分布的图表，分为以下几类

• 一维分类点图: 仅按照分类关系展示点的分布，用于观察不同分类数据的分布数量
• 一维连续点图: 将数据的一个连续字段映射到一个轴上，用于观察连续数据在一个维度上的分布
• 二维连续点图: 将数据的两个连续字段映射到两个轴上，用于观察数据字段之间的相关性
• 二维分类点图
• 二维分类/连续点图

数据格式 ​

视觉通道 ​

• color: 一般用于区分数据类型
• size: 一般用于反映大小
• shape: 一般用于状态或类型的区分
  • 实心: circle、square、bowite、diamond、hexagon、triangle、triangle-down
  • 空心: hollow-[实心shape类型]、cross、tick、plus、hyphen、line

应用示例 ​

// TODO: 这个例子不太好，数据需要调整
import { Chart } from "@antv/g2";

const data = new Array(1000).fill(undefined).map((v, i) => {
  return { x: parseInt("" + i / 100), y: +parseInt("" + Math.pow(i, 1 / 2)) };
});

const chart = new Chart({
  container: "chart",
  width: 800,
  height: 500,
  padding: 50,
});
chart.point().position("x*y").adjust("jitter").color("x");
chart.data(data);
chart.render();

点图常用于实现 散点图(描述疏密) 和 气泡图(描述权重)，或与其他图(如折线图)结合

路径和线 ​

线在一个方向(x 轴)上是有序的，路径可以是无序的
线图在极坐标系下需要进行闭合

数据格式 ​

视觉通道 ​

• color: 通常用于区分类型
• size: 影响线宽度，通常不作为属性度量表现，仅用作突出展示
• shape
  • 曲线: line、dot、smooth
  • 信号图: vh hv hvh vhv

应用示例 ​

import { Chart } from "@antv/g2";

const data = new Array(50)
  .fill(undefined)
  .map((v, i) => ({ x: i * 10, y: [100 * Math.pow(i, 1 / 3), i] }));

const chart = new Chart({
  container: "chart",
  width: 800,
  height: 500,
});
chart.line().position("x*y").shape("smooth");
chart.data(data);
chart.render();

区域图(面积图) ​

区域图在折线图的基础上形成，将折线图与自变量坐标轴间的区域进行填充，用于表示趋势和关系。

区域图的类型

• 一般区域图: 所有数据从相同的零轴开始
• 区间区域图: y 轴对应数据存在区间值
• 层叠区域图: 展示多个数据集，每个数据集的起点局域前一个数据集
• 对称层叠区域图: 对层叠的区域图进行对称处理，以体现不同时期各类数据的对比

区域图在极坐标系下需要进行闭合。

数据格式 ​

视觉通道 ​

• color
• size: 无效
• shape: area、smooth、line(仅用线包围，不填充)、smooth-line(仅用线包围，不填充)

应用示例 ​

// 区间区域图
import { Chart } from "@antv/g2";
const data = [
  { x: 1, y: [1, 1] },
  { x: 2, y: [2, 4] },
  { x: 3, y: [3, 9] },
];
const chart = new Chart({ container: "chart", width: 600, height: 300 });
chart.area().position("x*y").shape("smooth");
chart.data(data);
chart.render();

区间图 ​

区间图是一种表示数据上下区间的图表的几何，在不同的坐标系下表现不同

• 直角坐标系: 柱状图
• 极坐标系: 饼图玉缺图、玫瑰图(半径表示数据大小)
  • 使用半径表示数据大小: 玫瑰图
  • 使用弧度表示数据大小: 饼图、玉缺图

对于多个分组数据可以进行 层叠、分组、对称 等处理

区间图在坐标系下的表现

• 区间图在直角坐标系下表现为柱状图，在极坐标系下表现为玫瑰图
• 区间图在直角坐标系下转置(transpose)后表现为条形图，在极坐标系下转置(transpose)后表现为条形环图
• 层叠区间图在直角坐标系下转置后表现为层叠条形图，在极坐标系下转置后表现为层叠条形环图
• 当 shape 是 link tick 时在极坐标系下会做相应的弯曲

数据格式 ​

视觉通道 ​

• color: 用于对数据进行分组或对连续数据进行区间划分
• size
  • 柱状图: 解析为画布上的像素值
  • 玫瑰图: 解析为角度值
  • 饼图: 无意义
  • 环状条形图: 解析为画布上的像素值
• shape: rect、hollow-rect、line、tick(使用多条线来表示数据空间)

应用示例 ​

import { Chart } from "@antv/g2";
const data = [
  { x: "a", y: 1, type: "a" },
  { x: "b", y: 2, type: "a" },
  { x: "a", y: 3, type: "b" },
  { x: "b", y: 4, type: "b" },
];
const chart = new Chart({
  container: "chart",
  width: 600,
  height: 300,
});
chart.interval().adjust("stack").position("x*y").color("type");
chart.data(data);
chart.render();

多边形 ​

多边形是由任意多个点构成的封闭图形，常应用在

• 多个分类数据生成的色块图
• 连续数据生成的马赛克图
• 层次数据生成的填充树图（如 webpack 性能分析插件展示的图表）
• 地图

数据格式 ​

• x 是数组，y 是数组
• x 是分类数值，y 是分类数值

视觉通道 ​

• color
• size: 不支持
• shape: polygon, 默认值

箱型图与烛形图(K 线图) ​

注：原文为 自定义图(schema) 无法表达文章内容

箱型图与 K 线图 是一个字段对应多个值的图表

箱型图 ​

箱型图是用于显示一组数据分散情况的统计图表，由无缝数据节点构成，将一组数据倒序排列，分别计算出 上边缘、上四分位、中位数、下四分位、下边缘。

箱型图分为

• 一维箱型图: 仅表述单个维度的数据分布
• 二维箱型图: 表述多个分类的数据分布

数据格式 ​

• 一维箱型图: 映射到 x 的字段为数组，无映射到 y 的字段
• 二维箱型图: 映射到 x 的字段为类型，映射到 y 的字段为数组

视觉通道 ​

• shape: box 表示箱型图
• color: 用于二维箱型图区分类型
• size: 可以改变箱型图的宽度

应用示例 ​

// 一维箱型图
import { Chart } from "@antv/g2";
const data = [{ range: [1, 9, 16, 22, 24] }];
const chart = new Chart({
  container: "chart",
  width: 800,
  height: 300,
});
chart.schema().position("range*1").shape("box");
chart.data(data);
chart.render();

K 线图 ​

数据格式 ​

仅支持一种数据格式

• x 轴: 分类字段，一般为日期
• y 轴: 数组，格式为 [开盘、最高、最低、收盘]

视觉通道 ​

• color: 一般用于区分涨跌状态
• shape: candle 表示烛形图
• size: 表示烛形宽度

应用示例 ​

import { Chart } from "@antv/g2";

const data = [
  { time: "2015-11-18", range: [8.37, 8.09, 8.6, 8.03] },
  { time: "2015-11-19", range: [8.5, 8.09, 8.6, 8.03] },
  { time: "2015-11-20", range: [8.22, 8.09, 8.6, 8.03] },
];
const chart = new Chart({
  container: "chart",
  autoFit: true,
  height: 400,
  padding: [10, 40, 40, 40],
});
chart.schema().position("time*range").shape("candle");
chart.data(data);
chart.render();