翻譯|使用教程|編輯:王香|2019-01-30 10:26:07.000|閱讀 438 次
概述:使用自定義節(jié)點模板,我們的圖表變得非常美觀,但也許我們想要展示更多。也許我們想要一張組織結(jié)構(gòu)圖來表明Don Meow真的是貓卡特爾的老板。因此,我們將通過添加一些鏈接來顯示各個節(jié)點之間的關(guān)系以及自動定位節(jié)點的布局,從而創(chuàng)建一個完整的組織結(jié)構(gòu)圖。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
使用自定義節(jié)點模板,我們的圖表變得非常美觀,但也許我們想要展示更多。也許我們想要一張組織結(jié)構(gòu)圖來表明Don Meow真的是貓卡特爾的老板。因此,我們將通過添加一些鏈接來顯示各個節(jié)點之間的關(guān)系以及自動定位節(jié)點的布局,從而創(chuàng)建一個完整的組織結(jié)構(gòu)圖。
為了獲得我們的圖表的鏈接,基本Model不會削減它。我們將不得不在GoJS中選擇其他兩個模型中的一個,這兩個模型都支持鏈接。這些是GraphLinksModel和TreeModel。
在GraphLinksModel,我們model.linkDataArray除了model.nodeDataArray。它包含一組JavaScript對象,每個對象通過指定“to”和“from”節(jié)點鍵來描述鏈接。這是節(jié)點A鏈接到節(jié)點B并且節(jié)點B鏈接到節(jié)點C的示例:
var model = $(go.GraphLinksModel); model.nodeDataArray = [ { key:“A” }, { key:“B” }, { key:“C” } ]。 model.linkDataArray = [ { from:“A”,to:“B” }, { from:“B”,to:“C” } ]。 myDiagram.model = model;
GraphLinksModel允許您在節(jié)點之間擁有任意數(shù)量的鏈接,朝向任何方向。可能有十個鏈路從A到B運行,另外三個從B到A運行相反的方式。
TreeModel的工作方式略有不同。不是維護(hù)單獨的鏈接數(shù)據(jù)數(shù)組,而是通過為節(jié)點數(shù)據(jù)指定“父”來創(chuàng)建樹模型中的鏈接。然后從該關(guān)聯(lián)創(chuàng)建鏈接。這是與TreeModel相同的示例,其中節(jié)點A鏈接到節(jié)點B,節(jié)點B鏈接到節(jié)點C:
var model = $(go.TreeModel); model.nodeDataArray = [ { key: "A" }, { key: "B", parent: "A" }, { key: "C", parent: "B" } ]; myDiagram.model = model;
TreeModel比GraphLinksModel簡單,但它不能建立任意鏈接關(guān)系,例如同一個兩個節(jié)點之間的多個鏈接,或者具有多個父節(jié)點。我們的組織圖是一個簡單的分層樹狀結(jié)構(gòu),因此我們將為此示例選擇TreeModel。
首先,我們將通過添加更多節(jié)點,使用TreeModel以及在數(shù)據(jù)中指定鍵和父項來完成數(shù)據(jù)。
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo }); // the template we defined earlier myDiagram.nodeTemplate = $(go.Node, "Horizontal", { background: "#44CCFF" }, $(go.Picture, { margin: 10, width: 50, height: 50, background: "red" }, new go.Binding("source")), $(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, new go.Binding("text", "name")) ); var model = $(go.TreeModel); model.nodeDataArray = [ // the "key" and "parent" property names are required, // but you can add whatever data properties you need for your app { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Demeter", source: "cat2.png" }, { key: "3", parent: "1", name: "Copricat", source: "cat3.png" }, { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "cat5.png" }, { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" } ]; myDiagram.model = model;
購買GoJS正版授權(quán),請點擊“”喲!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn