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' }//漸變結束
    ],
    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' }//漸變結束
    ],
    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' },//設置連線彎曲樣式 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è)務代碼了，這里我們可以整理一下數(shù)據(jù)結構，把數(shù)據(jù)定義成json格式，然后寫一個函數(shù)通過json直接生成流程圖，當然坐標需要尋找規(guī)律自己計算一下

//創(chuàng)建元素
 var start = state(500,100,"ellipse","#00FFFF", "視頻播放成功率");
 var state1 = state(500,200,"rect","#f7a07b", "GET響應成功率");
 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)框，顯示當前點擊的內容。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JointJS流程圖如何繪制”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設計公司，關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，更多相關知識等著你來學習!

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網(wǎng)站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。