mxGraph是一個(gè)強(qiáng)大的JavaScript流程圖前端庫，可以快速創(chuàng)建交互式圖表和圖表應(yīng)用程序，國內(nèi)外著名的ProcessOne和draw.io都是使用該庫創(chuàng)建的強(qiáng)大的在線流程圖繪制網(wǎng)站.

這個(gè)庫相當(dāng)強(qiáng)大和復(fù)雜，以至于初次接觸會(huì)無從下手，不過官方的文檔是相當(dāng)強(qiáng)大和完善的，還有眾多的示例可以參考，因此，做出簡(jiǎn)單的效果是沒有問題的，我主要介紹一下我自己在項(xiàng)目中遇到的問題。

• 1.HTML元素作為流程圖元素

在項(xiàng)目中，我們要實(shí)現(xiàn)如下所示的流程圖。每個(gè)節(jié)點(diǎn)左側(cè)是圖標(biāo)，中間是文字描述，右側(cè)是狀態(tài)展示，這種樣式使用HTML是很好處理的，那么在mxGraph中節(jié)點(diǎn)可以使用HTML嗎，當(dāng)然是可以的。

首先，我們需要設(shè)置使用HTML標(biāo)簽

graph.htmlLabels = true;

然后，在創(chuàng)建cell的時(shí)候傳入HTML，大小，以及樣式即可，如下：

var style = 'text;strokeColor=none;fillColor=none;html=1;whiteSpace=wrap;verticalAlign=middle;overflow=hidden;';var html = '<table class="cellTable">' +' <tr>' +' <td>' +' <div class="cellIcon"><div></div></div>' +' </td>' +' <td class="cellLabel"></td>' +' <td class="cellState"><i class="fa"></i></td>' +' </tr>' +' </table>'; //創(chuàng)建cellvar cell = new mxCell(html, new mxGeometry(0, 0, 293, 89), style);cell.vertex = true;

使用HTML元素作為節(jié)點(diǎn)，可以很好的控制樣式，而且HTML節(jié)點(diǎn)也能很方便的添加事件和其他操作，十分方便。

• 2.流程圖自動(dòng)布局
  mxGraph提供了多種流程圖布局算法，常用緊湊樹布局算法即可，即
  
  new mxCompactTreeLayout(graph);
  
  不過這種算法只針對(duì)只有一個(gè)根節(jié)點(diǎn)的，對(duì)于這種有多個(gè)節(jié)點(diǎn)的，如下面這種：

則需要使用另外的算法來完成布局：

new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH);

通過根節(jié)點(diǎn)的數(shù)量來選擇不同的布局算法，以上。
又爛尾了，寫不下去，綜上，可以用HTML節(jié)點(diǎn)，以及根節(jié)點(diǎn)數(shù)量不同要選用不同的布局算法。

總結(jié)

以上是生活随笔為你收集整理的使用mxGraph绘制流程图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。