940
技術社區[雲棲]
【曹操】【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 ></div>
<script>
var diagram = Diagram.parse("A->B: Message");
diagram.drawSVG("diagram", {theme: 'hand'});
</script>
或者使用jQuery引用：
<div >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、效果展示
最後更新：2017-07-28 23:33:33