绘制基础图表

绘制基础图表

Geometry 几何标记

G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，所有的图表都是通过组合一系列图形语法元素绘制而成的，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合。

在 G2 中，我们通常这么描述一张图表：从数据到几何标记对象的图形属性的一个映射，此外图形中还可能包含数据的统计变换，最后绘制在某个特定的坐标系中。

在向大家介绍如何使用图形语法绘制各种基础图表前，需要先了解下 Geometry 几何标记：即我们所说的点、线、面这些几何图形，G2 默认提供了如下 9 中几何标记：

| | point | 点，用于绘制各种点图。 | | path | 路径，无序的点连接而成的一条线，常用于路径图的绘制。 | | line | 线，点按照 x 轴连接成一条线，构成线图。 | | area | 填充线图跟坐标系之间构成区域图，也可以指定上下范围。 | | interval | 使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。 | | polygon | 多边形，可以用于构建色块图、地图等图表类型。 | | edge | 两个点之间的链接，用于构建树图和关系图中的边、流程图中的连接线。 | | schema | 自定义图形，用于构建箱型图（或者称箱须图）、蜡烛图（或者称 K 线图、股票图）等图表。 | | heatmap | 用于热力图的绘制。 |

对于每一种几何标记来说，在绘制时还可以对应不同的形状（shape)，举例来说：

  • 点图，可以使用圆点、三角形、正方形、十字符号等表示点
  • 线图，可以有折线、曲线、点线等
  • 多边形，可以是实心的多边形，也可以是空心的仅有边框的多边形

绘制基础图表 - 图1

下表罗列了 G2 中各个 geometry 内置提供的 shape 类型:

| | point | ‘circle’, ‘square’, ‘bowtie’, ‘diamond’, ‘hexagon’, ‘triangle’, ‘triangle-down’, ‘hollow-circle’, ‘hollow-square’, ‘hollow-bowtie’, ‘hollow-diamond’, ‘hollow-hexagon’, ‘hollow-triangle’, ‘hollow-triangle-down’, ‘cross’, ‘tick’, ‘plus’, ‘hyphen’, ‘line’ | hollow 开头的图形都是空心的。 | | line | ‘line’, ‘dot’, ‘dash’, ‘smooth’, ‘hv’, ‘vh’, ‘hvh’, ‘vhv’, ‘hv’, ‘vh’, ‘hvh’, ‘vhv’ 用于绘制阶梯线图。 | | | area | ‘area’, ‘smooth’, ‘line’, ‘smooth-line’ | ‘area’ 和 ‘smooth-line’ 是填充内容的区域图，其他图表是空心的线图。 | | interval | ‘rect’, ‘hollow-rect’, ‘line’,’tick’, ‘funnel’, ‘pyramid’ | ‘hollow-rect’ 是空心的矩形，’line’ 和 ‘tick’ 都是线段，’funnel’ 用于绘制漏斗图；’pyramid’ 用于绘制金字塔图。 | | polygon | ‘polygon’ | polygon：多边形。 | | schema | ‘box’, ‘candle’ | 目前仅支持箱须图(‘box’)、K 线图(‘candle’)。 | | edge | ‘line’, ‘vhv’, ‘smooth’, ‘arc’ | vhv：直角折线，arc：弧线，分为笛卡尔坐标系、极坐标系、带权重和不带权重四种情况。 |

折线图

基础实例

链接：

绘制基础图表 - 图2

核心语法

chart.line().position('year*value');

面积图

基础实例

链接：

绘制基础图表 - 图3

核心语法

  1. chart.area().position('year*value');

柱状图

基础实例

链接：

绘制基础图表 - 图4

核心语法

  1. chart.interval().position('year*sales');

条形图

基础实例

链接：

绘制基础图表 - 图5

核心语法

  1. chart.coordinate().transpose();
  2. chart.interval().position('country*population');

饼图

基础实例

链接：

绘制基础图表 - 图6

核心语法

  1. chart.coordinate('theta');
  2. chart
  3.   .interval()
  4.   .position('percent')
  5.   .color('item')
  6.   .adjust('stack');

散点图

基础实例

链接：

绘制基础图表 - 图7

核心语法

  1. chart
  2.   .point()
  3.   .position('height*weight')
  4.   .color('gender')
  5.   .shape('circle')
  6.   .style({
  7.     fillOpacity: 0.6,
  8.   });

漏斗图

基础实例

链接：

绘制基础图表 - 图8

核心语法

  1. chart
  2.   .coordinate('rect')
  3.   .transpose()
  4.   .scale(1, -1);
  5. chart
  6.   .interval()
  7.   .adjust('symmetric')
  8.   .position('action*percent')
  9.   .shape('funnel')
  10.   .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']);

雷达图

基础实例

链接：

绘制基础图表 - 图9

核心语法

  1. chart.coordinate('polar', {
  2.   radius: 0.8,
  3. });
  4. chart
  5.   .line()
  6.   .position('item*score')
  7.   .color('user')
  8.   .size(2);
  9. chart
  10.   .point()
  11.   .position('item*score')
  12.   .color('user')
  13.   .shape('circle')
  14.   .size(4)
  15.   .style({
  16.     stroke: '#fff',
  17.     lineWidth: 1,
  18.     fillOpacity: 1,
  19.   });
  20. chart
  21.   .area()
  22.   .position('item*score')
  23.   .color('user');

更多

更多关于 Geometry 几何标记和图表类型的信息，可以翻阅几何标记与图表类型章节。