溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JointJS流程圖如何繪制，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
最近項目上需要用流程圖來做問題定界分析，之前有同事用jsPlumb做過，但是閱讀代碼后覺得比較麻煩，所以自己又找了一圈，找到一個叫Dagre-D3的開源類庫，畫出來的效果如下圖，Dagre-D3最大的優(yōu)點就是可以實現(xiàn)自動布局，你只需要put數(shù)據(jù)就可以了，但是缺點就是自動布局后的連線會比較亂，而且連線不是橫平豎直的，對于流程圖不復(fù)雜的還好，稍微復(fù)雜點畫出來的連線就沒法看。最后還是被pass了。
jsPlumb地址：https://jsplumbtoolkit.com
Dagre-D3 Git地址：https://github.com/cpettitt/dagre-d3
后面經(jīng)過一番百度，最終決定用JointJS，官網(wǎng)：www.jointjs.com，相比Dagre-D3和jsPlumb，JointJS的API很詳細，代碼量少，連接線有多種選擇，封裝了多種常用的形狀，而且能畫的圖很多，官方也給了一些demo可以參考。下面是我用JointJS畫出來的流程圖：
依賴：在官網(wǎng)的下載頁面都能找到
<link rel="stylesheet" type="text/css" href="joint.css" /> <script src="jquery.min.js"></script> <script src="lodash.min.js"></script> <script src="backbone-min.js"></script> <script src="joint.js"></script>
我的demo里還引用了bootstrap的依賴用來顯示模態(tài)框
html代碼
<body> <div id="paper" class="paper"></div> <div class="modal fade searchpanel" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h5 class="modal-title" id="modalTitle">詳細信息</h5> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> </div> </div> </div> </div> </body>
js代碼
首先是定義畫板和畫布，這里重寫了ElementView和LinkView，目的是為了讓畫出來的流程圖不能被刪除和編輯
var graph = new joint.dia.Graph();
var ElementView = joint.dia.ElementView.extend({
pointerdown: function () {
this._click = true;
joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
},
pointermove: function(evt, x, y) {
this._click = false;
joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
},
pointerup: function (evt, x, y) {
if (this._click) {
// triggers an event on the paper and the element itself
this.notify('cell:click', evt, x, y);
} else {
joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
}
}
});
var LinkView = joint.dia.LinkView.extend({
addVertex: function(evt, x, y) {},
removeVertex: function(endType) {},
pointerdown:function(evt, x, y) {}
});
//定義畫布
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 1200,
height: 600,
gridSize: 1,
model: graph,
elementView: ElementView,
linkView:LinkView
});
//paper.$el.css('pointer-events', 'none')//去除默認樣式，使所有事件不可用然后我寫了兩個函數(shù)分別用來創(chuàng)建形狀和連線，這樣寫可以減少代碼量，官方的demo也大都是這樣寫的
//定義形狀
var state = function(x, y, shape, background, text){
var cell;
if(shape==="rect"){
cell = new joint.shapes.basic.Rect({
position: { x: x, y: y },//坐標
size: { width: 140, height: 40 },//寬高
attrs: {
rect: {
fill: {
type: 'linearGradient',
stops: [
{ offset: '0%', color: background },//漸變開始
{ offset: '100%', color: '#fe8550' }//漸變結(jié)束
],
attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
},
stroke: background,//邊框顏色
'stroke-width': 1//邊框大小
},
text: { text: text } //顯示文字
}
});
} else if(shape==="ellipse"){
cell = new joint.shapes.basic.Ellipse({
position: { x: x, y: y },//坐標
size: { width: 140, height: 40 },//寬高
attrs: {
ellipse: {
fill: {
type: 'linearGradient',
stops: [
{ offset: '0%', color: background },//漸變開始
{ offset: '100%', color: '#FFFFFF' }//漸變結(jié)束
],
attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
},
stroke: background,//邊框顏色
'stroke-width': 1//邊框大小
},
text: { text: text } //顯示文字
}
});
}
graph.addCell(cell);
return cell;
};
//定義連線
function link(source, target, label){
var cell = new joint.dia.Link({
source: { id: source.id },
target: { id: target.id },
labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }],
router: { name: 'manhattan' },//設(shè)置連線彎曲樣式 manhattan直角
attrs: {
'.connection': {
stroke: '#333333',//連線顏色
'stroke-width': 2//連線粗細
},
'.marker-target': {
fill: '#333333',//箭頭顏色
d: 'M 10 0 L 0 5 L 10 10 z'//箭頭樣式
}
}
});
graph.addCell(cell);
return cell;
}最后就是我們實際的業(yè)務(wù)代碼了，這里我們可以整理一下數(shù)據(jù)結(jié)構(gòu)，把數(shù)據(jù)定義成json格式，然后寫一個函數(shù)通過json直接生成流程圖，當(dāng)然坐標需要尋找規(guī)律自己計算一下
//創(chuàng)建元素
var start = state(500,100,"ellipse","#00FFFF", "視頻播放成功率");
var state1 = state(500,200,"rect","#f7a07b", "GET響應(yīng)成功率");
var state2 = state(400,300,"rect","#f7a07b", "HTTP錯誤碼分析");
var state3 = state(600,300,"rect","#f7a07b", joint.util.breakText("TCP異常和其他原因",{width:80}));
var state4 = state(400,400,"rect","#f7a07b", "4XX、5XX分析");
var state5 = state(600,400,"rect","#f7a07b", "接口以上分析");
var state6 = state(750,400,"rect","#f7a07b", "接口以下分析");
//創(chuàng)建連線
link(start, state1, "");
link(state1, state2, "≥70%");
link(state1, state3, "<70%");
link(state2, state4, "");
link(state3, state5, "是");
link(state3, state6, "否");
//給所有元素添加點擊事件
paper.on('cell:click', function (e) {
$("#detailModal .modal-body").html("");
var arr = $("#"+e.id+" tspan");
if(arr.length===1){
$("#detailModal .modal-body").append($(arr).html());
$("#detailModal").modal();
} else{
var tmp="";
$.each(arr, function(k,v){
tmp+=$(v).html();
});
$("#detailModal .modal-body").append(tmp);
$("#detailModal").modal();
}
});后面是給每個元素（不包含連線）添加了一個點擊事件，彈出一個模態(tài)框，顯示當(dāng)前點擊的內(nèi)容。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JointJS流程圖如何繪制”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼