Jquery.flowchart

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

第一個要介紹的是 Jquery.flowchart，他是一個可以畫流程圖的 jQuery 套件，GitHub 最後更新日期是 2 年前，也是滿久了。

會選擇這個套件最主要的原因是「造型」，網路上當然有很多其他造型的流程圖套件，也有比較正規的圖示，但這個套件的造型剛好符合我的需求，長得也不錯於是我就用了。

使用上也不難，我簡單寫了一個搭配 ajax 讀取資料的範例，如下：

$(function() {
    var flowChartObj = $('#flowchart');

    flowChartObj.flowchart({
        data: {}
    });

    $.ajax({
            method: "GET",
            url: "取資料 url"
        })
        .done(function(data) {
            flowChartObj.flowchart('setData', data);
        })
        .fail(function() {
            alert("取得資料失敗。");
        });
});

更新

後來在實作上我發現一個小 bug，他在 setData 的時候有清空 operators 沒有清空 links，導致畫線時殘留的原資料 links 找不到對應 operator，所以自己改了一下套件程式，在套件 183 行加上 this.data.links = {};。

...
setData: function(data) {
   ...
    this.data.links = {};
    for (var linkId in data.links) {
        this.createLink(linkId, data.links[linkId]);
    }
    ...
},
...

參考文件

• Jquery.flowchart