在html上動態產生流程圖

edited 四月 2014 in 問題與建議
有個需求是要依DB的資料,動態的在網頁上產生流程圖.
請求建議與指導

評論

  • edited 四月 2014
    我寫過關聯圖,和流程圖很類似,大概說個概念給你參考一下
    圖+連接線+字的部分是Javascript組成.... (每個元素都是JAVASCRIPT的物件)
    PHP的部分就是產生物件和串聯關係JAVASCRIPT語法..

    連接線會隨著圖的位置(流程圖大概是菱形方形那種)產生到對應的連接線(如虛線,箭頭)

    而我完成時只做到讓使用拖拉關聯圖位置~版面讓使用者自己調~(因為很難判斷到完美讓版面很美觀顯示)

    但其實可以作到自己先預設將圖擺到空白位置,然後線有交錯避開~

    圖大概就這樣~(@@ 阿咧~原來有這種貼圖功能ㄛ!)
    image
  • 感謝您的幫忙
    我現在的問題是最基本也是最重要的,如何用 JAVASCRIPT
    在網頁上產生一個資料塊,以及如何用JAVASCRIPT 連結資料塊
    可否提供一小段示範code ,或相關資料連結?
  • reyrey
    edited 四月 2014
    根據 noon 的作品

    一個區塊物件的產生, 綁 drag & drop 的 even , 觸發時立即重新劃線, 直線跟90度計算, 如果是斜線還要算斜度之類的

    所以複雜的應該是線的實作,
    請問 noon 您是用什麼方式實作線條? 直接用 1x1 的黑點? 或是用其它套件?

    樓主可以用 document.createElement 產生 一個區塊,
    比較麻煩是根據每個區塊的大小,然後其位置 x, y, 去實作劃線功能,

    如果區塊都設定一樣大的話,( 超出的字截掉); 那應該可以用箭頭圖示, 不用去畫線,或許較單純一點
  • edited 四月 2014
    說:

    根據 noon 的作品

    一個區塊物件的產生, 綁 drag & drop 的 even , 觸發時立即重新劃線, 直線跟90度計算, 如果是斜線還要算斜度之類的

    所以複雜的應該是線的實作,
    請問 noon 您是用什麼方式實作線條? 直接用 1x1 的黑點? 或是用其它套件?

    哇~住在巷子內的~的確線是最複雜的~(就完全自己寫的 javascript 物件方式建構出來的)

    線不能用點~物件太多會很嚴重的延遲~所以我這邊的實作連接線分五段
    兩邊箭頭 +兩邊串連箭頭的線 + 串接串連線的線

    箭頭是直接用img tag 由GD產生 (因為可設定大小以及方向)
    線則是用 DIV 只用框框的單邊用 style 來設定直線或虛線以及線的粗細

    然後計算每個區塊圖的相對位置作相對方向的串連~(就是判斷座標嚕)

    至於特殊型~其實現在還是過渡時期都是用圖形替代~
    像斜線~就做一個透明圖~直接利用瀏覽器圖形寬度高度自動拉出來 <---這個太誇張就不適用了
  • 說:

    感謝您的幫忙
    我現在的問題是最基本也是最重要的,如何用 JAVASCRIPT
    在網頁上產生一個資料塊,以及如何用JAVASCRIPT 連結資料塊
    可否提供一小段示範code ,或相關資料連結?

    要會HTML DOM Document 基本語法@@
    會了大概就知道我說的東西了~
    不過你的難度應該是流程圖那種區塊圖產生~比串連線還難作~
    用圖片縮放~線條粗細就會不同~所只能重繪~光作這個就很累人了~(如果支援每種流程圖形的話)
  • noon 提到會HTML DOM Document 基本語法,就可以了解您所說的東西
    沒會錯意是指
    DOM 架構,還有DOM 操作基本語法,
    就這個提示還是沒法形成具體cdoe 來表示資料區塊.
    一個資料區塊大概會有下列屬性
    坐標,大小,father 坐標 , sons 坐標, 區塊內資料,
    但這些如何具體變成code 並呈現在網頁上,沒有概念.
    懇求簡單的範例

    附上需求:
    需求是不用畫的,單純用html 看起來像圖
    譬如有資料是 A B C 三塊,流程 是 A->B->C , ABC分別用方塊包著
  • reyrey
    edited 四月 2014
    <html>
    <div id='flowchart'> </div>
    </html>

    <script>
    var flowchart= document.getElementById('flowchart');

    //產生 文字區塊為 abc 的物件
    var char = document.createElement('div');
    flowchart.appendChild(char);
    var textNode = document.createTextNode('abc');
    char.appendChild(textNode);
    </script>


    程式碼產生基本文字 「abc」 的物件, 但還需加上 position:absolute 或 float: left 等屬性;
    看需求,若是只有「單一列」而且往 「橫向」的 ,如所言 A->B->C,也不考慮所有物件置中

    那或許可以比較單純不用 absolute 屬性,也不用計算位置, 變成
    A 區塊 + 箭頭區塊 + B區塊 , 箭頭區塊 + C區塊 +......
  • reyrey
    edited 四月 2014
    To none;

    「 線不能用點~物件太多會很嚴重的延遲~所以我這邊的實作連接線分五段
    兩邊箭頭 +兩邊串連箭頭的線 + 串接串連線的線 」

    請問物件太多,
    這裡的物件指的是 儲在 js array 裡的 點 elem 物件?

    因為原想法是將這些產生線的點,儲在一個 dom 裡,
    那 js 只要一個變數,存這個 dom ,以方便刪除用
    其實 js 變數裡,儲存的 dom 應該只是 reference

    這部份有實作過,產生許多的 elem 在一個 dom ,的確 drag 此 dom 的時候會卡卡的,所以看不到的地方,要將那裡的 elem 先移除 @@,

    但靜態狀況下,只能待有機會實作,在試試延遲的問題

    「兩邊箭頭 +兩邊串連箭頭的線 + 串接串連線的線 」
    這的確是比較省資源的做法, thanks

    「像斜線~就做一個透明圖~直接利用瀏覽器圖形寬度高度自動拉出來 」
    其實不太了解,請問是什意思? 謝謝 !

  • 感謝 rey, 消化中,成果好了會附上
  • 目前實作的方法最後是用 無邊介 table , 改變有資料的區塊顏色當block , 用表格定位
    ,動態ajax 動作部分還沒確定, 先把靜態的部分貼出來

    <table border=\"0\" width=\"100%\" >
    <tr>
    <td width=\"21\" rowspan=\"5\" bgcolor=\"#00FFFF\">CP</td>
    <td width=\"93\" rowspan=\"3\"><hr></td>
    <td width=\"72\" rowspan=\"3\" bgcolor=\"#00FFFF\">CPR1</td>
    <td width=\"39\"><hr></td>
    <td width=\"320\" bgcolor=\"#00FFFF\">chk1</td>
    <td width=\"85\" rowspan=\"3\"><hr></td>
    <td width=\"389\" rowspan=\"3\" bgcolor=\"#00FFFF\"><p align=\"left\">event1</p>
    <p align=\"left\">event2</p>
    </td>
    </tr>
    <tr>
    <td><hr></td>
    <td bgcolor=\"#00FFFF\">chk2</td>
    </tr>
    <tr>
    <td><hr></td>
    <td bgcolor=\"#00FFFF\">chk3</td>
    </tr>
    <tr>
    <td rowspan=\"2\"><hr></td>
    <td rowspan=\"2\" bgcolor=\"#00FFFF\">CPR2</td>
    <td><hr></td>
    <td bgcolor=\"#00FFFF\">chk1</td>
    <td rowspan=\"2\"><hr></td>
    <td rowspan=\"2\" bgcolor=\"#00FFFF\">event2</td>
    </tr>
    <tr>
    <td><hr></td>
    <td bgcolor=\"#00FFFF\">chk2</td>
    </tr>
    </table>
Sign In or Register to comment.