视图，由 Chart 生成和管理，拥有自己独立的数据源、坐标系和图层，用于异构数据的可视化以及图表组合，一个 Chart 由一个或者多个视图 View 组成。因此 view 上的 api 同 chart 基本相同。

如何创建视图对象：

  1. chart.view();

下面是创建视图的语法，首先你需要创建一个 chart 对象，然后调用 chart.view(cfg) 方法生成：

  1. const view = chart.view({
  2.   start: {
  3.     x: 0,
  4.     y: 0
  5.   }, // 视图绘图区域的起始点，x、y 数值在 0 - 1 范围内
  6.   end: {
  7.     x: 1,
  8.     y: 1
  9.   } // 视图绘图区域的结束点，x、y 数值在 0 - 1 范围内
  10. });

chart.view(cfg) 方法中的参数 cfg 可以为空或者传入以下属性：

  1. {
  2.   start: null, // 绘制区域的起始坐标，默认值为 {x: 0, y: 0}
  3.   end: null, // 绘制区域的终点坐标，默认值为 {x: 1, y: 1}
  4.   data: null, // 源数据，标准的 JSON 数组
  5.   animate: {boolean} // 同 chart 配置保持一致
  6. }

属性

start

绘制区域的起始坐标，结构如下：

  1. {
  2.   x: 0, // x 取值范围为 0 -1
  3.   y: 0 // y 取值范围为 0 -1
  4. }

对于 view，我们的起始点是从左上角开始的。

end

绘制区域的终点坐标，结构如下：

  1. {
  2.   x: 0, // x 取值范围为 0 -1
  3.   y: 0 // y 取值范围为 0 -1
  4. }

data

视图的数据源，同时也可以使用 view.source(data) 方法设置数据源。

animate

视图是否执行动画，默认执行。

!注意：chart 下创建的 view 将默认使用 chart 的 列定义、坐标轴 axis 配置、坐标系 coord 配置，即如果 view 不自己定义则默认同 chart 的配置相同；如果 view 自己定义了相应的配置，则以自己的为准。

如下实例所示：

  1. const data = [
  2.   { genre: 'Sports', sold: 275 },
  3.   { genre: 'Strategy', sold: 115 },
  4.   { genre: 'Action', sold: 120 },
  5.   { genre: 'Shooter', sold: 350 },
  6.   { genre: 'Other', sold: 150 }
  7. ];
  9. const chart = new G2.Chart({
  10.   id: 'c1',
  11.   forceFit: true,
  12.   height: 400,
  13.   padding: [ 40, 80, 100, 80 ]
  14. });
  16. chart.source(data, {
  17.   genre: {
  18.     alias: '游戏种类'
  19.   },
  20.   sold: {
  21.     alias: '销售量',
  22.     min: 0
  23.   }
  24. });
  25. chart.coord('polar', {
  26.   innerRadius: 0.6
  27. });
  28. chart.axis('genre', {
  29.   label: {
  30.     textStyle: {
  31.       fill: '#f80',
  32.       fontWeight: 'bold'
  33.     }
  34.   }
  35. });
  36. chart.interval().position('genre*sold').color('genre');
  38. const view = chart.view({
  39.   start: {
  40.     x: 0.25,
  41.     y: 0.25
  42.   },
  43.   end: {
  44.     x: 0.75,
  45.     y: 0.75
  46.   }
  47. });
  48. view.source(data); // 默认使用 chart 的列定义
  49. view.coord('polar', {
  50.   innerRadius: 0
  51. }); // 覆盖了 chart 的 coord 配置
  52. view.axis('sold', false); // 对于 genre 对应的坐标轴配置会默认使用 chart 的坐标轴配置
  53. view.interval()
  54.   .position('genre*sold')
  55.   .color('genre', [ '#61A5E8', '#7ECF51', '#EECB5F', '#E4925D', '#E16757' ]);
  56. chart.render();

方法

source

同 chart.source()。

getXScale

同 chart.getXScale()，只是返回该视图 x 轴对应的度量。

getYScales

同 chart.getYScales()，只是返回该视图 y 轴对应的度量。

getXY

同 chart.getXY()。

filter

同 chart.filter()。

axis

同 chart.axis()。

guide

同 chart.guide()。

scale

同 chart.scale()。

coord

同 chart.coord()。

tooltip

(enable: boolean)

view 上的 tooltip 方法只用于开启和关闭 tooltip。

  1. view.tooltip(false); // 关闭 view 上的 tooltip

animate

同 chart.animate()。

clear

同 chart.clear()。

changeData

同 chart.changeData()。

changeVisible

同 chart.changeVisible()。

repaint

同 chart.repaint()。

destroy

同 chart.destroy()。

line

同 chart.line()。

path

同 chart.path()。

interval

同 chart.interval()。

area

同 chart.area()。

point

同 chart.point()。

polygon

同 chart.polygon()。

edge

同 chart.edge()。

schema

同 chart.schema()。

heatmap

同 chart.heatmap()。