G2 基本概念理解

G2的组成

• 坐标轴Axis
  每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。
  每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（grid）组成。

• 图例 LEGEND
  图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，用于辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。

• 几何标记 GEOM
  几何标记（Geometry），即所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现，不同的几何标记都包含对应的图形属性。

• 提示信息 TOOLTIP
  当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

• 辅助标记 GUIDE
  当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 guide。

创建图表

eg:

const chart = new G2.Chart({
  container: 'id or element object',
  width: 1000,
  height: 500,
});

装在数据的两种方式

• data属性传入

  const chart = new G2.Chart({
    id: 'c1',
    width: 600,
    height: 300,
    data: [
      { x: 'a', y: 1 },
      { x: 'b', y: 2 },
      ...
    ]
  });
  

• 调用 chart.source(data) 方法，每个字段的列定义也可以在这里传入

  chart.source(data, {
    x: {
      type: 'cat'
    },
    y: {
      min: 0
    }
  });
  

其数据源支持json数组和DataView两种格式。

更新数据的方式：

// 方式1：
chart.changeData(data); 

// 方式二：
chart.source(data);
chart.repaint();

// 方式三
使用DataView实时更新数据

DataSet

DataSet是一个独立的数据处理包，拥有丰富的数据处理能力。

使用方法分四个步骤：

1. 创建 DataSet 对象，指定状态量
2. 创建 DataView 对象，在 transform 中使用状态量
3. 创建图表，引用前面创建 DataView
4. 改变状态量，所有 DataView 更新