Jquery.flowchart

最近想到一個新文章主題,身為網頁工程師幾年來也碰過不少套件,針對這些我覺得不錯的套件做個整理和超沒誠意的簡單介紹,陸陸續續分享給大家。

第一個要介紹的是 Jquery.flowchart,他是一個可以畫流程圖的 jQuery 套件,GitHub 最後更新日期是 2 年前,也是滿久了。
會選擇這個套件最主要的原因是「造型」,網路上當然有很多其他造型的流程圖套件,也有比較正規的圖示,但這個套件的造型剛好符合我的需求,長得也不錯於是我就用了。

使用上也不難,我簡單寫了一個搭配 ajax 讀取資料的範例,如下:
  1. $(function() {
  2. var flowChartObj = $('#flowchart');
  3.  
  4. flowChartObj.flowchart({
  5. data: {}
  6. });
  7.  
  8. $.ajax({
  9. method: "GET",
  10. url: "取資料 url"
  11. })
  12. .done(function(data) {
  13. flowChartObj.flowchart('setData', data);
  14. })
  15. .fail(function() {
  16. alert("取得資料失敗。");
  17. });
  18. });

更新

後來在實作上我發現一個小 bug,他在 setData 的時候有清空 operators 沒有清空 links,導致畫線時殘留的原資料 links 找不到對應 operator,所以自己改了一下套件程式,在套件 183 行加上 this.data.links = {};
  1. ...
  2. setData: function(data) {
  3. ...
  4. this.data.links = {};
  5. for (var linkId in data.links) {
  6. this.createLink(linkId, data.links[linkId]);
  7. }
  8. ...
  9. },
  10. ...
參考文件

留言