教程

简介

var chart = chart.createView({
  index: 0, // 索引值
  start: {
    x: 0,
    y: 0
  }, // 画布起始点，x y 为 [0 - 1] 范围的数据
  end: {
    x: 0,
    y: 0
  } // 画布终点，x y 为 [0 - 1] 范围的数据
});

从 G2 2.0 开始，我们支持多视图的图表绘制功能，即一个图表可以由多个视图（View）组成，对于每一个 View，它拥有自己独立的数据源、坐标系、图层，所以在 G2 2.0 中就可以进行异构数据的图表绘制。Chart 对象和 View 对象的关系如下：

  1. Chart 负责所有 View 对象的创建、移除和绘制；
  2. View 拥有自己的数据源、Coord、Axis、Geom；
  3. 图例 和 提示信息 由 chart 统一进行管理， view 并不拥有自己的 legend 和 tooltip，view.tooltip(boolean) 和 view.legend(boolean) 只提供开关功能。

如何使用

第一步：创建 view

直接通过调用 chart.createView(cfg) 即可创建 view 对象，此时会默认创建一个 index 索引值为 0，绘制范围同 chart 的视图对象，当然你可以为 view 手动指定索引值和绘制范围，如下所示：

var chart = new G2.Chart({
  id: 'c1',
  width : 1000,
  height : 500,
  plotCfg: {
    margin: [20, 200]
  }
});

var view = chart.createView({
  index: 1, // 索引值，默认为 0
  start: {
    x: 0.2,
    y: 0.2
  }, // 指定该视图绘制的开始坐标点，x y 为 [0 - 1] 范围的数据
  end: {
    x: 1,
    y: 1
  } // 指定该视图绘制的结束坐标点，x y 为 [0 - 1] 范围的数据
});

这里需要说明的是：

  1. 为了让用户更好更快速得指定视图的绘制区域，start 和 end 这两个参数只接受 0 至 1 范围的数据。
  2. View 的绘制起始点是左上角。

第二步：绘制图表

创建好 view 之后，就可以同 chart 一样载入数据，使用图形语法进行图表的绘制了，语法同 chart。在这里，view 不负责最后的画布绘制，统一由 chart 对象进行渲染，即 chart.render()。

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

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

示例

$.getJSON('../static/data/world.geo.json', function(mapData) {
  var Frame = G2.Frame;
  var Stat = G2.Stat;
  var userData = [
    {name: 'Russia',value: 86.8},
    {name: 'China',value: 106.3},
    {name: 'Japan',value: 94.7},
    {name: 'Mongolia',value: 98},
    {name: 'Canada',value: 98.4},
    {name: 'United Kingdom',value: 97.2},
    {name: 'United States of America',value: 98.3},
    {name: 'Brazil',value: 96.7},
    {name: 'Argentina',value: 95.8},
    {name: 'Algeria',value: 101.3},
    {name: 'France',value: 94.8},
    {name: 'Germany',value: 96.6},
    {name: 'Ukraine',value: 86.3},
    {name: 'Egypt',value: 102.1},
    {name: 'South Africa',value: 101.3},
    {name: 'India',value: 107.6},
    {name: 'Australia',value: 99.9},
    {name: 'Saudi Arabia',value:130.1},
    {name: 'Afghanistan',value: 106.5},
    {name: 'Kazakhstan',value:93.4},
    {name: 'Indonesia',value: 101.4}
  ];
  var frame = new Frame(userData);
  frame.addCol('trend', function(obj) {
    return (obj.value > 100) ? 1 : 0;
  });
  var map = [];
  var features = mapData.features;
  for(var i=0; i<features.length; i++) {
    var name = features[i].properties.name;
    map.push({
      "name": name
    });
  }
  var chart = new G2.Chart({
    id: 'c1',
    width: 800,
    height: 400
  });
  chart.tooltip({
    title: null
  });
  chart.legend(false);

  var view = chart.createView();  // 创建第一张视图，用于整体世界地图背景的绘制
  view.source(map);
  view.tooltip(false);
  view.polygon().position(Stat.map.region('name', mapData)).shape('stroke').style({
    fill: '#fff',
    stroke: '#ccc',
    lineWidth: 1
  });

  var userView = chart.createView(); // 创建第二张视图，用于用户展示数据的绘制
  userView.source(frame, {
    'trend': {
        type: 'cat',
        alias: '每100位女性对应的男性数量',
        values: ['女性更多', '男性更多']
    }
  });
  userView.polygon().position(Stat.map.region('name*value', mapData)).color('trend',['#C45A5A','#14647D']).opacity('value').tooltip('name*trend');
  chart.render();
});

更多 view 的用法详见 API。