初始化流程

Chart -> View -> Base -> EventEmitter

1️⃣Base#constructor(cfg)

初始化配置(visible默认true)

Chart#getDefaultCfg

chart拥有自己的config + view#getDefaultCfg() + visible

2️⃣View#constructor(cfg)

view#_setTheme()

主题相关的配置

geom属性创建

初始化所有内置的geom，并且赋值给view的同名属性 类似如下：
view#point = new Point({cfg});

chart#init() => view#init()

chart#init() 

  1. chart._initCanvas();//new Canvas
  2. chart._initPlot();
  3. chart._initEvents();
  5. //into view#init()
  6.  view._initViewPlot(); // 先创建容器
  7.  if (view.get('data')) {//有数据，就初始化 -- 初始化直接带数据那种
  8.    view._initData(this.get('data'));
  9.  }
  10.  view._initOptions();
  11.  view._initControllers();
  12.  view._bindEvents();
  14. //back chart#init()
  16. //初始化各种Controller

3️⃣Controller

  1. Controller#Scale,Coord,Axis,Guide,Legend,Tooltip,Event
属性 Controller
scaleController (for view) Scale
coordController (for view) Coord
axisController (for view) Axis
guideController (for view) Guide
legendController (for chart) Legend
tooltipController (for chart) Tooltip
eventController (for view) Event

Chart中属性&对应的Controller

基础配置

chart#cfg

  1. {
  2.       id: null, //view层id，这个和container属性设置一个即可
  3.       forceFit: false, // plot根据resize事件来同步拉伸缩放
  4.       container: null, //见id,这个是view的实例
  5.       wrapperEl: null, // 类似于一个container 如：<div style="position:relative;"></div>
  6.       canvas: null, // 绘制的canvas，详见 @antv/g/lib/canvas.js
  7.       width: 500, //plot宽度
  8.       height: 500, //plot高度
  9.       pixelRatio: null,//像素比? -- 像素的缩放比例(TODO 具体待查)
  10.       backPlot: null, // plot在最后面的一层
  11.       frontPlot: null,// plot在最前面的一层
  12.       /**
  13.       const backgroundStyle: G2.Styles.background = {
  14.       fill: "#aaa", // 图表背景色
  15.       fillOpacity: .5, // 图表背景透明度
  16.       stroke: "#aaa", // 图表边框颜色
  17.       strokeOpacity: .5, // 图表边框透明度
  18.       opacity: .5, // 图表整体透明度
  19.       lineWidth: 1, // 图表边框粗度
  20.       radius: 5 // 图表圆角大小
  21.       }
  22.       */
  23.       plotBackground: null, // plot 背景颜色
  24.       padding: [ 20, 20, 95, 80 ],//left top right bottom
  25.       background: null, //参见 plotBackground
  26.       autoPaddingAppend: 5, //自动padding增加的像素
  27.       limitInPlot: false, // TODO 姑且认为作用是限制绘图的区域在plot里面吧
  28.       renderer: 'canvas', // 默认是canvas，还有svg.. 具体见@antv/g/lib/renders/index.js
  29.       views: [] //G2 的图表可以由多个视图 view 构成，同时各个视图可以拥有各自的数据，即支持异构数据
  30. }

view#cfg

  1. {
  2.       viewContainer: null,//绘制view的视图实例
  3.       coord: null, //几何坐标系(目前全是二维坐标 直角,极坐标,地理, 螺旋坐标)
  4.       start: { x: 0, y: 0 }, //开始坐标
  5.       end: { x: 1, y: 1 }, //结束坐标
  6.       geoms: [],//几何标记-点、线、面这些几何图形-都是配置此来决定绘制什么类型图表
  7.       scales: {},//度量-主要是归一化的操作，主要针对 连续数据类型(将数据缩放到[0,1]的范围)和分类数据类型(采用index形式[0,1....])
  8.       options: {},//视觉通道选项(position,color,size,shape,opacity) => 这些都是属于一个geoms的
  9.       scaleController: null, //度量Controller
  10.       padding: 0,
  11.       theme: null, //主题
  12.       parent: null,
  13.       tooltipEnable: true, // 是否展示 tooltip
  14.       animate: Global.animate,//动画配置默认开启
  15.       visible: true //是否可见
  16. }

控制器(Controller)

Scale: 度量

Coord: 坐标系

Axis: 坐标轴

Guide: 辅助标记

Legend: 图例

Tooptip: 提示信息

Event: 鼠标操作事件

  1.     canvas.on('mousedown', Util.wrapBehavior(this, 'onDown'));
  2.     canvas.on('mousemove', Util.wrapBehavior(this, 'onMove'));
  3.     canvas.on('mouseleave', Util.wrapBehavior(this, 'onOut'));
  4.     canvas.on('mouseup', Util.wrapBehavior(this, 'onUp'));
  5.     canvas.on('click', Util.wrapBehavior(this, 'onClick'));
  6.     canvas.on('dblclick', Util.wrapBehavior(this, 'onClick'));
  7.     canvas.on('touchstart', Util.wrapBehavior(this, 'onTouchstart'));
  8.     canvas.on('touchmove', Util.wrapBehavior(this, 'onTouchmove'));
  9.     canvas.on('touchend', Util.wrapBehavior(this, 'onTouchend'));