Apache Zeppelin可视化插件开发详解

1.可视化插件的生命周期

• 可视化插件的基类中包括的主要方法如下，比较重要的包括constructor、render、activate、destroy方法。当我们的插件实现该基类并覆盖相应的方法时，zeppelin框架会去按照插件的生命周期调用相应的方法。
  
  

• Zeppelin后台调用插件的是result.controller.js，这是采用了angularJS框架调用我们插件相应的方法，只要我们实现Visualization基类，该框架中有相应的逻辑会判断该基类的子类是否实例化，实例化之后更具zeppelin的状态和操作调用相应的方法。

• 可视化插件的生命周期主要包括三种状态
  

• 刷新状态的触发：

1.	当zeppelin解释器运行程序并调用出可视化插件时；
2.	当点击浏览器的刷新按键时；
3.	当页面切换到其他页面时，再次切换回来时；
当插件处于刷新状态时，会依次调用constructor、getTransformation、render、active方法

激活状态的触发：

1.	插件第一次被点击的时候（注意如果点击最开始调出可视化插件时默认显示的插件不会进入激活状态）；
2．激活状态时会依次调用插件的getTransformation、render、active方法。

失活状态的触发：
1.	当点击另一个插件时，原先的插件进入失活状态，会调用deactivate方法

• 问题：
  • 1.插件的constructor有时在刚开始调出可视化插件时会调用两次，所以开发的时候如果有在constructor进行的业务逻辑一定要小心，建议尽量不要在 constructor中写业务逻辑。
  • 2.setConfig方法有时会报错，我参照zeppelin其他的可视化插件时发现，对应的setConfig方法也会报错，即使你不覆盖基类的setConfig方法。所以继承基类的时候建议不要写setConfig方法，并不会有影响（参照其他的一些插件，可以不用写setConfig方法）。

2.插件的工作流程

2.1 我们先看一下插件构造方法

• 如图，我们可以看到构造方法中zeppelin中的angularJS框架为我们创建了一个div区域，该区域对应的就是插件的显示区域，同时我们注意到div区域的id是唯一的，形式为：“p20180709-192929_995054800_1_sogou-map-vis-geom”。即p+日期（年月日）+唯一的序列号+插件名称。这个唯一的ID很重要，后面我们会多次使用。也就是说构造方法中主要为我们创建了一个ID唯一的div区域，我们所有后续的操作都应该围绕该div区域进行。

2.2 render方法

• render方法将zeppelin解释器中的数据通过参数data带入，data中columns携带列数据，rows携带行数据。
  

• 所有相关的数据操作都应当在render方法中进行。其他的active、deactivate主要是一些状态位的设置和更正，这里就不细说了。

• 注意：
  this.targetEl实例化后为下图中下半部分的区域
  this.transformation实例化后为下图上半不封的区域

• 当我们的第三方库不支持模块化时或者我们想设计更加复杂的布局，都需要围绕this.targetEL进行div的插入或删除操作。特别是不支持模块化的库创建时一定要注意利用this.targetEL.id(例"p20180709-192929_995054800_1_sogou-map-vis-geom")来创建关联的唯一ID。否则会出现一些难以排查的bug。

3. 可视化插件基类

• 在开发的过程中你可以继承我封装的该类SogouMapVis，也可以自己定义一个类但严格按照SogouMapVis的流程写，可以保证程序正确的运行。当可视化插件在生命周期中切换时，SogouMapVis中的流程能够保证元素的ID不会冲突（当元素ID冲突时，会有很多意想不到的bug，比如点击事件不生效或者生效的位置错乱等）。

• 例：
  1.当我们的代码中缺少下面这段

var tableID="#"+this.targetEl.id;
$(tableID).empty();//清空div中的数据

• 当你不停的切换包含相同表类型的插件时，唯一ID的div中就会不停的创建表区域，如下图childNodes属性所示，因此你需要在每次操作前先清空其子元素。
  

• 当你创建定制的复杂的div或元素时，要保证div或元素的id唯一。可以使用如下的例子 var xxxID=”xxx”+ this.targetEl.id; 或者var xxxID=”#xxx”+ this.targetEl.id; 再使用jQuery框架如$(xxxID)进行操作（当然使用jQuery需要你引入对应模块化的库）。

4.可视化插件开发过程中的加载

• 经过实际测试
  Zeppelin框架0.7.x的版本对插件加载支持的不是很好（很长时间或者基本加载不出来可视化插件）。建议使用zeppelin 0.8.x的版本。

• 可视化插件的加载方式包括本地加载和线上加载，本地加载经测试有问题，加载不上且需要自己编写静态打包的配置文件，然后使用webpack打包编译工具打包编译，这样会影响开发速度且容易出错。

• 线上打包编译相对好一些，但也有自身问题，速度也比较慢，且有时候更新了插件的配置文件如下图
  

• 但对应的目录，文件不更新，如下图。解决办法，当老版本的插件文件加载完毕后（红框中所示）这时候可以删除红框中的文件，刷新helium包。

• 如下图点击刷新，请耐心等待，等上图的文件重新加载完毕后，打开看一看是不是要求的版本，如果还不是可以重复上面的操作一遍，如果仍然没有加载更新，请重启zeppelin。还需要注意的是zeppelin框架有时候会启不起来，那么请再重启一次或者先运行关闭脚本，再运行开启脚本。

• 我们在开发过程中用到了一些第三方插件：如ag-grid表格插件，该插件功能强大。相应API请参考：https://blog.fundodoo.com/docs/ag-grid/reference/grid-properties。

5. 开源项目

• 具体的可视化插件开源项目可参考： https://github.com/RobinLiew/Zeppelin-Geospatial-Visualization-Plugins

扫码关注公众号

• 后台回复“Hadoop”、“Hbase”、“Spark”等免费获取更多Hadoop、Hbase、Spark等学习教材及实战资料