Jquery.flowchart
最近想到一個新文章主題,身為網頁工程師幾年來也碰過不少套件,針對這些我覺得不錯的套件做個整理和超沒誠意的簡單介紹,陸陸續續分享給大家。
第一個要介紹的是 Jquery.flowchart,他是一個可以畫流程圖的 jQuery 套件,GitHub 最後更新日期是 2 年前,也是滿久了。 會選擇這個套件最主要的原因是「造型」,網路上當然有很多其他造型的流程圖套件,也有比較正規的圖示,但這個套件的造型剛好符合我的需求,長得也不錯於是我就用了。
使用上也不難,我簡單寫了一個搭配 ajax 讀取資料的範例,如下:
第一個要介紹的是 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]);
- }
- ...
- },
- ...
參考文件
留言
張貼留言