【曹操】【js-sequence-diagrams】前端js绘制时序图

背景说明：

    因为最近在开发一个新的项目，代号曹操，后续可能会更新许多曹操项目相关的开发技术博文，见证曹操项目的从0到上线到最终的产品，也见证自己从java后台到前端全栈到最后全战的开发dog。。。
曹操项目：
前端：angularjs
后台：java

1、需求描述

最近有个功能需要画出某个组件的服务器与上下游服务器的交互情况，画出交互的时序图，并注明交互信息、时间等内容，类似wireshark的Graph Analysis功能：

2、需求解决

在网上找了很久没有画图的js，百度的echart和蚂蚁的G2都翻遍了，确实功能很强大，但是没有实现时序图的方法，甚至期间还去改了echart的关系图，尝试做个二维的时序图，很可惜，效果很差。。直到遇见了js-sequence-diagrams，这不就是最完美的解决方案吗？我天，天造一双啊！

以下是官方给出的例子：
官网地址：https://bramp.github.io/js-sequence-diagrams/

左边为效果图，右边为文本控制。

3、实现方法

3.1、官方文档中给出以下js引用方法:

首先在页面中引用相关js：

<script src="webfont.js"></script>
<script src="snap.svg-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>

在html文档中手动添加解析文本：

<div id="diagram"></div>
<script>
  var diagram = Diagram.parse("A->B: Message");
  diagram.drawSVG("diagram", {theme: 'hand'});
</script>

或者使用jQuery引用：

<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>

3.2、结合需求

该需求是从数据库中查出很多交互信息，每画一条线需要一个list数据，后台在查询数据库后会以json格式返回所有数据，该json数据的result为一个大的array，array中又有很多map，其中每个map的key是一样的，value不同，所有的map根据时间排序。

前端拿到数据后，在angular的controller js中按照顺序将每条map数据拼接成js-sequence-diagrams形式的文本画出对应的线条，由此生成一个完整的时序图。具体代码如下：

js引用方法：

sipTraceService.getSipTraceList($scope.sipTrace.connid).then(function(data){
       if( null != data && data != undefined && data.result.length != 0){
           
           var result = data.result;
           var htmlTexts = '';
           //对数据进行迭代
           result.forEach(function(ele,index){
               //格式化时间    
               formatTime = $filter('date')( ele.time,'yyyy-MM-dd HH:mm:ss:sss');
               var htmlText = '';
               var inbound = ele.inbound;
               var ip = ele.ip;
               newIp = ip.split(':')[0];
               //根据inbound的值，判断箭头方向
               if(inbound == 0){
                  htmlText   = newIp+'->'+ele.hostip+':'+'\\n'+'cseq：'+ele.cseq+'\\n'+'Request：'+ele.name+'\\n'+'时间：'+formatTime;
               }else if(inbound == 1){
                   htmlText   = ele.hostip+'->'+newIp+':'+'\\n'+'cseq：'+ele.cseq+'\\n'+'Status：'+ele.name+'\\n'+'时间：'+formatTime;
               }
               htmlTexts+=htmlText+'\n';
           })  
       //画图
           var diagram = Diagram.parse(htmlTexts);    
           diagram.drawSVG("diagram", {theme: 'simple'});
       }else {
           alert('connid不存在！');
       }
    
       });

在html上引用js文件，然后通过在controller里使用js方法处理后台数据，按照js-sequence-diagrams的格式输出文本，最后使用其方法完成画图。

4、效果展示