1.一種基于HTML5的節(jié)點(diǎn)關(guān)系圖的顯示方法,其特征在于,包括如下步驟：
S1：由用戶輸入或web服務(wù)器后臺(tái)返回特定json格式的數(shù)據(jù)；
S2：JavaScript腳本對(duì)該格式的json數(shù)據(jù)進(jìn)行解析,得到相應(yīng)的節(jié)點(diǎn)和節(jié)點(diǎn)關(guān)系；
S3：圖形繪制模塊繪制創(chuàng)建一個(gè)空白畫布；
S4：圖形繪制模塊在空白畫布上繪制節(jié)點(diǎn)和節(jié)點(diǎn)連接線；
S5：圖形元素事件處理模塊設(shè)置相應(yīng)的鼠標(biāo)事件相應(yīng)程序；
S6：將圖形輸出到web頁面上顯示。
2.如權(quán)利要求1所述的基于HTML5的節(jié)點(diǎn)關(guān)系圖的顯示方法,其特征在于,所述以用戶輸入的方式傳入節(jié)點(diǎn)關(guān)系圖的圖形數(shù)據(jù),使用JavaScript腳本程序處理成json格式的數(shù)據(jù)并臨時(shí)存儲(chǔ)。
3.如權(quán)利要求1所述的基于HTML5的節(jié)點(diǎn)關(guān)系圖的顯示方法,其特征在于,所述以web服務(wù)器后臺(tái)返回節(jié)點(diǎn)關(guān)系圖的圖形數(shù)據(jù),使用異步請(qǐng)求技術(shù)ajax異步請(qǐng)求web服務(wù)器返回json格式數(shù)據(jù)。
4.如權(quán)利要求1所述的基于HTML5的節(jié)點(diǎn)關(guān)系圖的顯示方法,其特征在于,所述節(jié)點(diǎn)的繪制使用開源JavaScript庫arbor.js的力導(dǎo)向節(jié)點(diǎn)布局算法來設(shè)定節(jié)點(diǎn)的坐標(biāo)。
5.如權(quán)利要求1所述的基于HTML5的節(jié)點(diǎn)關(guān)系圖的顯示方法,其特征在于,所述圖形元素包括節(jié)點(diǎn)關(guān)系圖上所有的節(jié)點(diǎn),幾點(diǎn)連接線以及節(jié)點(diǎn)連接線的文字標(biāo)簽。
6.如權(quán)利要求1所述的基于HTML5的節(jié)點(diǎn)關(guān)系圖的顯示方法,其特征在于,所述鼠標(biāo)事件包括鼠標(biāo)滑過圖形元素(包括節(jié)點(diǎn),節(jié)點(diǎn)名稱,節(jié)點(diǎn)連接線以及節(jié)點(diǎn)連接線名稱),鼠標(biāo)懸浮在圖形元素上以及鼠標(biāo)點(diǎn)擊圖形元素。
7.一種節(jié)點(diǎn)關(guān)系顯示系統(tǒng),其特征在于,包括數(shù)據(jù)輸入模塊,數(shù)據(jù)解析器,圖形繪制模塊和鼠標(biāo)事件處理模塊：
所述用戶數(shù)據(jù)輸入模塊用于獲取存儲(chǔ)圖形數(shù)據(jù)的json格式數(shù)據(jù)并臨時(shí)存儲(chǔ)；
所述數(shù)據(jù)解析器用于把json格式的圖形數(shù)據(jù)解析為相應(yīng)的節(jié)點(diǎn)和節(jié)點(diǎn)連接線；
所述圖形繪制模塊用于在canvas上繪制節(jié)點(diǎn)和節(jié)點(diǎn)連接線并顯示到web頁面上；
所述鼠標(biāo)事件處理模塊用于設(shè)置節(jié)點(diǎn)關(guān)系圖上各個(gè)元素的鼠標(biāo)事件響應(yīng)方法。