多视图 view 绘制

如何创建视图示例G2 的图表可以由多个视图 view 构成，同时各个视图可以拥有各自的数据，即支持异构数据。在结构上，视图和 chart 相同，拥有自己独立的数据源、坐标系和图层。 如何创建视图直接通过调用 chart.createView(cfg) 即可创建 view 对象，此时会默认创建一个 index 索引值为 0，绘制范围同 chart，当然你可以为 view 手动设置 start 和 end 属性手动指定绘制范围，如下所示：

  1. // 首先需要创建 chart 对象
  2. var chart = new G2.Chart({
  3.   id: 'c1',
  4.   width : 1000,
  5.   height : 500,
  6.   plotCfg: {
  7.     margin: [20, 200]
  8.   }
  9. });
  10. // 然后创建一个视图
  11. var view = chart.createView({
  12.   index: 1, // 设置索引值，默认为 0
  13.   start: {
  14.     x: 0.2,
  15.     y: 0.2
  16.   }, // 指定该视图绘制的起始位置，x y 为 [0 - 1] 范围的数据
  17.   end: {
  18.     x: 1,
  19.     y: 1
  20.   } // 指定该视图绘制的结束位置，x y 为 [0 - 1] 范围的数据
  21. });

这里需要说明的是：

为了让用户更好更快速得指定视图的绘制区域，start 和 end 这两个参数只接受 0 至 1 范围的数据。View 的绘制起始点是画布左上角。创建好 view 之后，就可以同 chart 一样载入数据，使用图形语法进行图表的绘制了，语法同 chart。在这里，view 并不负责最后的画布绘制，统一由 chart 对象进行渲染，即 chart.render()。

  1. view.source(data); // 为 View 载入数据
  2. view.interval().position('x*y').color('x'); // 使用图形语法绘制图表
  4. chart.render(); // 由 chart 负责统一的渲染

关于 view 的更多方法请查看 view api。 示例在进行地理数据的可视化的时候，使用多视图的绘制方式就会非常方便。 通常情况下，地理数据的可视化会包含多份数据：一份是用于绘制地图的经纬度数据，一份是用户真正想要可视化的用户数据。 在这个例子中，需要在世界地图上标注各个国家的男女比例情况，这个时候就可以使用多视图的可视化方案：首先绘制世界地图背景，使用包含世界地图经纬度的数据，然后再可视化包含各个国家男女比例的用户数据。

  1. $.getJSON('../../../../static/data/world.geo.json', function(mapData) {
  2.   var Frame = G2.Frame;
  3.   var Stat = G2.Stat;
  4.   var userData = [
  5.     {name: 'Russia',value: 86.8},
  6.     {name: 'China',value: 106.3},
  7.     {name: 'Japan',value: 94.7},
  8.     {name: 'Mongolia',value: 98},
  9.     {name: 'Canada',value: 98.4},
  10.     {name: 'United Kingdom',value: 97.2},
  11.     {name: 'United States of America',value: 98.3},
  12.     {name: 'Brazil',value: 96.7},
  13.     {name: 'Argentina',value: 95.8},
  14.     {name: 'Algeria',value: 101.3},
  15.     {name: 'France',value: 94.8},
  16.     {name: 'Germany',value: 96.6},
  17.     {name: 'Ukraine',value: 86.3},
  18.     {name: 'Egypt',value: 102.1},
  19.     {name: 'South Africa',value: 101.3},
  20.     {name: 'India',value: 107.6},
  21.     {name: 'Australia',value: 99.9},
  22.     {name: 'Saudi Arabia',value:130.1},
  23.     {name: 'Afghanistan',value: 106.5},
  24.     {name: 'Kazakhstan',value:93.4},
  25.     {name: 'Indonesia',value: 101.4}
  26.   ];
  27.   var frame = new Frame(userData);
  28.   frame.addCol('trend', function(obj) {
  29.     return (obj.value > 100) ? 1 : 0;
  30.   });
  31.   var map = [];
  32.   var features = mapData.features;
  33.   for(var i=0; i<features.length; i++) {
  34.     var name = features[i].properties.name;
  35.     map.push({
  36.       "name": name
  37.     });
  38.   }
  39.   var chart = new G2.Chart({
  40.     id: 'c1',
  41.     forceFit: true,
  42.     height: 450,
  43.     syncXYScales: true, // 统一视图的度量
  44.     plotCfg: {
  45.       margin: [55, 20]
  46.     }
  47.   });
  48.   chart.tooltip({
  49.     title: null
  50.   });
  51.   chart.legend('trend', {
  52.     position: 'left'
  53.   });
  54.   // 绘制世界地图背景
  55.   var view = chart.createView();
  56.   view.source(map);
  57.   view.tooltip(false);
  58.   view.polygon().position(Stat.map.region('name', mapData)).shape('stroke').style({
  59.     fill: '#fff',
  60.     stroke: '#ccc',
  61.     lineWidth: 1
  62.   });
  63.   // 绘制展示数据
  64.   var userView = chart.createView();
  65.   userView.source(frame, {
  66.     'trend': {
  67.       type: 'cat',
  68.       alias: '每100位女性对应的男性数量',
  69.       values: ['女性更多', '男性更多']
  70.     }
  71.   });
  72.   userView.polygon().position(Stat.map.region('name*value', mapData)).color('trend',['#C45A5A','#14647D']).opacity('value').tooltip('name*trend');
  73.   chart.render();
  74. });
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="