View 视图

阅读时间约 2 分钟

G2 的 View 是图层容器的概念,每一个 View 拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例,可以理解 View 是整个 G2 体系中,用来组装数据,Component,Geometry 的容器。 一个 View 可以包含有多个子 View,通过这种嵌套关系,可以将一个画布按照不同的布局划分多个不同区域(分面),也可以将不同数据源的多个 View 叠加到一起,形成一个多数据源,多图层的图表。

而 Chart 是继承自 View,用于提供创建 canvas、已经自适应图表大小等能力,便于开发者使用的类。在类结构设计上,Chart 和 View 的关系如下:

如何创建视图

直接通过调用 chart.createview() 即可创建 View 对象,此时会默认创建一个绘图区域于 Chart 相同的视图,当然你可以通过 region  属性指定 view 的绘图区域。

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

// step 1: 需要创建 chart 对象
const chart = new Chart({
  container: 'container',
  autoFit: false,
  width: 1000,
  height: 500,
});

// step 2: 然后创建一个视图
const view = chart.createView({
  region: {
    start: { x: 0.2, y: 0.2 }, // 指定该视图绘制的起始位置,x y 为 [0 - 1] 范围的数据
    end: { x: 1, y: 1 }, // 指定该视图绘制的结束位置,x y 为 [0 - 1] 范围的数据
  },
  padding: [20, 40], // 指定视图的留白
});

这里需要说明的是:

  1. 为了让用户更好更快速得指定视图的绘制区域,region 中的 start 和 end 这两个参数只接受 0 至 1 范围的数据。
  2. 不指定 region,则默认为父 view 的绘图区域大小。
  3. View 的绘制起始点是画布左上角。

创建好 view 之后,就可以同 chart 一样载入数据,使用图形语法进行图表的绘制了,语法同 chart。

说明:需要注意的是,view 并不负责最后的画布绘制,统一由 chart 对象进行渲染,即 chart.render()

view.data(data); // 为 View 载入数据
view.interval().position('x*y').color('x'); // 使用图形语法绘制图表

chart.render(); // 由 chart 负责统一的渲染

示例

下面两个示例,来看如何使用多 View 来组织画布。

多 View 划分画布

在看股票涨跌情况的时候

  1. 一方便会使用专业的 k 线图去展示股票涨跌信息;
  2. 另一方面,我们也可以使用一个简单的柱形图,显示绝对的涨跌情况,并根据柱子的红绿颜色标记涨跌。

这种情况,就使用两个 View 并排显示,去显示不同的图形,具体如下 demo:

这里主要用到 View 配置 region 去按照父 View 的位置、宽高百分比的形式拆分画布。

多 View 叠加

在进行地理数据的可视化的时候,使用多视图的绘制方式就会非常方便。通常情况下,地理数据的可视化会包含多份数据:一份是用于绘制地图的经纬度数据,一份是用户真正想要可视化的用户数据。

在这个例子中,需要在世界地图上标注各个国家的男女比例情况,这个时候就可以使用多视图的可视化方案:

  1. 首先绘制世界地图背景,使用包含世界地图经纬度的数据;
  2. 然后再可视化包含各个国家男女比例的用户数据。

这里有一个很重要的 View 配置 syncViewPadding,传入 boolean 值,含义是:是否需要将子 View 的 padding 同步,如果设置同步,那么可以保证子 View 在 auto padding 的情况下,所有子 View 的图形能够完全重合,避免显示上的错位。