View

View

属性startendiddataparentgeomscoordscalesoptionsanimate方法sourcecolaxiscoordtooltip参数guidefilterclearrepaintchangeDatagetGeomsgetScalegetYScalesgetXScalegetPositionDEMO视图，由 Chart 生成和管理，拥有自己独立的数据源、坐标系和图层，用于异构数据的可视化以及图表组合，一个 Chart 由一个或者多个视图 View 组成。下面是创建视图的语法，首先你需要创建一个 chart 对象，然后调用 chart.createView(cfg) 方法生成：

var view = chart.createView({
  id: String, // 视图的 id 标识符，如果用户不指定，G2 会默认提供一套 id 生成机制（'view' + views.length，如 view0, view1, ..., viewN）
  start: {
    x: 0,
    y: 0
  }, // 视图绘图区域的起始点，x、y 数值在 0 - 1 范围内
  end: {
    x: 1,
    y: 1
  } // 视图绘图区域的结束点，x、y 数值在 0 - 1 范围内
});

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

{
  start: null, // 绘制区域的起始坐标，默认值为 {x: 0, y: 0}
  end: null, // 绘制区域的终点坐标，默认值为 {x: 1, y: 1}
  id: '', // 每个 view 的 id 标识，默认值为 'view0'
  data: null, // 源数据，标准的 JSON 数组
  animate: Boolean // 同 chart 配置保持一致
}

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

{
  x: 0, // x 取值范围为 0 -1
  y: 0 // y 取值范围为 0 -1
}

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

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

{
  x: 0, // x 取值范围为 0 -1
  y: 0 // y 取值范围为 0 -1
}

id: String 视图的 id 标识，用于唯一标定视图，如果用户不指定，G2 会默认提供一套 id 生成机制（’view’ + views.length，如 view0, view1, …, viewN）。

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

animate: Boolean 视图是否执行动画，默认执行。注意：从 2.2.2 版本开始，chart 下创建的 view将默认使用列定义、坐标轴 axis 配置、坐标系 coord 配置，即如果 view 不自己定义则默认同 chart 的配置相同；（所以这里对于地理投影坐标来说，直接在 chart 上声明坐标系就可以全部统一了），如果 view 自己定义了相应的配置，则以自己的为准。如下实例所示：

var data = [
  {genre: 'Sports', sold: 275},
  {genre: 'Strategy', sold: 115},
  {genre: 'Action', sold: 120},
  {genre: 'Shooter', sold: 350},
  {genre: 'Other', sold: 150},
];
var chart = new G2.Chart({
  id: 'c1',
  width: 600,
  height: 300
});
chart.source(data, {
  genre: {
    alias: '游戏种类'
  },
  sold: {
    alias: '销售量',
    min: 0
  }
});
chart.coord('polar', {
  inner: 0.75
});
chart.axis('genre', {
  labels: {
    label: {
      fill: '#f80',
      fontWeight: 'bold'
    }
  }
});
chart.interval().position('genre*sold').color('genre');
var view = chart.createView({
  start: {
    x: 0.25,
    y: 0.25
  },
  end: {
    x: 0.75,
    y: 0.75
  }
});
view.source(data); // 默认使用 chart 的列定义
view.coord('polar', {
  inner: 0
}); // 覆盖了 chart 的 coord 配置
view.axis('sold', false); // 对于 genre 对应的坐标轴配置会默认使用 chart 的坐标轴配置
view.interval().position('genre*sold')
  .color('genre', ['#61A5E8', '#7ECF51', '#EECB5F', '#E4925D', '#E16757']);
chart.render();

属性以下属性可以通过 view.get(‘AttrName’) 获取。 start类型：Object 绘制区域的起始坐标，结构如下：

{
  x: 0, // x 取值范围为 0 -1
  y: 0 // y 取值范围为 0 -1
}

end类型：Object 绘制区域的终点坐标，结构如下：

{
  x: 1, // x 取值范围为 0 -1
  y: 1 // y 取值范围为 0 -1
}

id类型：String 视图的 id 标识，用于唯一标定视图，如果用户不指定，G2 会默认提供一套 id 生成机制（’view’ + views.length，如 view0, view1, …, viewN）。 data类型：Array 视图的数据源，标准 JSON 数组。 parent类型：Chart 该视图所属的 Chart 对象。 geoms类型：Array 该视图所绘制的所有的几何标记对象。 coord类型：Coord 该视图的坐标系对象。 scales类型：Object 该视图实例的所有 scale 度量对象。 options类型：Object 返回生成 view 实例相关的所有配置项，详见配置项支持。 animate类型：Boolean 视图是否执行动画，默认执行。方法source方法名：view.source(data[, colDefs, namesArr]) 说明：使用方法同 Chart，详见 ->。 col方法名：view.col(dim, cfg) 说明：使用方法同 Chart，详见 ->。 axis方法名：view.axis(dim, cfg) 说明：使用方法同 Chart，详见 ->。 coord方法名：view.coord(type[, cfg]) 说明：使用方法同 Chart，详见 ->。 tooltip方法名：view.tooltip(enable) 说明：是否展示该视图的提示信息。参数 enable: Boolean 开关，是否展示该视图的提示信息，默认展示，调用 view.tooltip(false) 即可关闭。 guide方法名：view.guide().() 说明：使用方法同 Chart，详见 ->。 filter方法名：view.filter(dim, remained) 说明：使用方法同 Chart，详见 ->。 clear方法名：view.clear() 说明：使用方法同 Chart，详见 ->。 repaint方法名：view.repaint() 说明：使用方法同 Chart，详见 ->。 changeData方法名：view.changeData(data) 说明：使用方法同 Chart，详见 ->。 getGeoms方法名：view.getGeoms() 说明：获取该视图中所有的几何标记对象，返回的结果是一个数据 Array。 getScale方法名：view.getScale(dim) 说明：使用方法同 Chart，详见 ->。 getYScales方法名：view.getYScales() 说明：获取该视图整体 y 轴对应的 scale, 如果有多个则是数组。 getXScale方法名：view.getXScale() 说明：获取视图 x 轴对应的 scale。 getPosition方法名：view.getPosition({xDim: value, yDim: value}) 说明：使用方法同 Chart，详见 ->。 DEMO名称示例散点矩阵分级统计图美国各个机场航线图

                    当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
                        上一篇:
                        下一篇:
            <div class="