antV--G2 学习

2019-11-18:

学习内容：

一、基本概念：

坐标轴 AXES：

　　每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。

　　每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（grid）组成。

几何标记（Geometry）：

　　即我们所说的点、线、面这些几何图形

提示信息 TOOLTIP：

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

辅助标记 GUIDE:

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

二、创建图表：

（1）图表容器：container

// html中：
<div id="c1"></div>


// 传入dom id：
const chart = new G2.Chart({
  container: 'c1',
  width: 1000,
  height: 500,
  padding: [ 20, 20, 95, 80 ] // 上，右，下，左

});


// 或者传入dom 的html节点：
container: document.getElementById('c1'),

（2）图表样式：

background：用于设置整个 chart 的图表背景样式，包括边框，背景色，透明度，圆角等；

plotBackground：用于设置 chart 绘图区域的背景样式，包括边框，背景色，透明度，圆角等；

padding：用于设置边距，用法同 CSS 中的 padding 属性相同, [上，右，下，左]；

（3）图表宽度自适应：

　　width 参数可以不配置

const chart = new G2.Chart({
  container: 'c1',
  forceFit: true,  // 默认false
  height : 400
});

注意：

G2 的图表是根据父容器的宽度来计算宽度，如果父容器隐藏，则会将宽度计算成 0，显示父容器时，需要调用一下 chart.forceFit()。

仅当浏览器的窗口变化时，图表会重新计算宽度，其他情况下不进行宽度的计算和自适应。

（4）图表动画：

　　默认情况下，G2 的图表动画处于开启状态，关闭方法：

// 方式一： 设置 animate 属性
const chart = new G2.Chart({
  container: 'c1',
  width: 800,
  height : 400,
  animate: false // 关闭图表动画
});

// 方式二： 手动调用 animate 函数
chart.animate(false); // 关闭动画

三、装载数据：

（1）装载

方法一：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
  }
})

（2）数据格式：

i、json 数组：

const data = [
  { gender: '男', count: 40 },
  { gender: '女', count: 30 }
];

chart.source(data);

ii、dataview 对象：

　　《三、dataset 数据集包》中叙述

（3）更新数据：

G2 更新数据的方式主要有三种：

仅仅是更新图表的数据

清理所有，重新绘制

使用 DataView 时的更新

i、仅仅更新data，：

-- 需要马上更新图表：使用 chart.changeData(data)

-- 仅仅更新数据而不需要马上更新图表：

chart.source(newData);

chart.guide().clear();// 清理guide
chart.repaint();

ii、更新数据时还可以清除图表上的所有元素，重新定义图形语法，重新绘制：

chart.line().position('x*y');

chart.render();

chart.clear(); // 清理所有
chart.source(newData); // 重新加载数据
chart.interval().position('x*y').color('z');
chart.render();