MindFusion.Diagramming for WinForms是一個能幫助你創建工作流和進程圖表的.NET控件；數據庫實體關系圖表；組織圖表；對象層次和關系圖表；圖表和樹。它是基于對象－圖表框，表格和箭頭類型，將其歸類分派給其他并結合成復雜的結構。該控件提供超過預先定義的50多種圖表框，如自定義設計樣式和對圖表框著色等。MindFusion.Diagramming for WinForms現已加入在線訂購，Standard Single Developer版本原價2848現在年終鉅惠搶購立享優惠只需2345，立即查看詳情>>

點擊下載MindFusion.Diagramming for WinForms最新試用版

我們將構建一個圖表，在其中將以分層方式排列節點，以可視化公司中的責任鏈。我們為節點使用JavaScript圖表庫，TreeLayout和自定義AnchorPattern定義。這是最終結果：

<script src =“ MindFusion.Common.js” type =“ text / javascript”> </ script>
<script src =“ MindFusion.Diagramming.js” type =“ text / javascript”> </ script>
<script src =“ ChainOfResponsibility.js” type =“ text / javascript”> </ script>

<div style="position: absolute; top: 0px; bottom: 0px; right: 0px; width: 200px;
height: 200px; border-bottom: 1px solid #e2e4e7; background-color: #c0c0c0;">
                <canvas id="overview" width="200" height="200">
                </canvas>
            </div>        

二.圖和圖節點

我們使用表示圖畫布的HTML元素創建圖：

// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create(document.getElementById("diagram"));
diagram.setVirtualScroll(true);

元素，但根據滾動條的位置顯示圖的內容。這樣甚至可以將大圖繪制到小屏幕上，例如移動設備。

每個節點將保留文本，并將根據其在樹中的位置以特殊顏色呈現。這是包含節點的文本和顏色的兩個列表：

//list with brushes for the nodes
var brushes = ["#0099cc",  "#33cccc", "#00e6ac", "#00e6ac", "#99cc00", "#99cc00", "#ff9900",  "#ff9900", "#ff5c33"];
//list with company positions
var positions = ["CEO", "Vice Presidents", "Regional Directors", "Head of Departments", "Senior Managers", "Team Leaders", "Senior Specialists", "Specialists", "General Workers"];

var f = diagram.getFactory();
for (var i = 0; i < 9; i++)
{
var node = f.createShapeNode(0, 0, 25, 15);
node.setText(positions[i]);
node.setBrush({ type: 'SolidBrush', color: brushes[i] });
node.setStroke('#7F7F7F');
}

三.圖表鏈接

我們在要通過createDiagramLink方法連接的節點之間創建DiagramLink實例。該方法返回新創建的鏈接的實例。

var link = f.createDiagramLink（n [0]，n [1]）;

//we make the links look pretty
function styleLink(link)
{
link.setStroke("#7F7F7F");
link.setStrokeThickness(1.0);
link.setHeadShape("Triangle");
link.setHeadShapeSize(3.0);
link.setHeadBrush({ type: 'SolidBrush', color: '#7F7F7F' });
}

styleLink（link）;

然后，我們使用AnchorPattern類在錨定到節點上創建兩個模式。錨點是節點上用于傳入或傳出鏈接的對接點–取決于創建它們的方式。該AnchorPattern從建AnchorPoint實例。每個AnchorPoint代表一個停靠點，構造函數中的其他兩個布爾參數指定是否應將模式應用于傳入和傳出節點。AnchorPoint -s定義相對于矩形的對接點，其頂部，左側，底部，右側的尺寸為（0、0、100、100）。這意味著左邊框中間的點是（0，50），而下邊框中間的點是（50，100）。

這是我們將使用的兩個AnchorPattern -s的代碼：

var ap1 = new AnchorPattern([
new AnchorPoint(50, 0, true, true),
new AnchorPoint(100, 50, true, true),
new AnchorPoint(50, 100, true, true),
new AnchorPoint(0, 50, true, true)
]);

var ap2 = new AnchorPattern([
new AnchorPoint(50, 0, true, true),
new AnchorPoint(50, 100, true, true),
new AnchorPoint(0, 50, true, true)
]);

for (var i = 0; i < 9; i++)
{
if (n[i].getOutgoingLinks().length > 1)
n[i].setAnchorPattern(ap2);
else
n[i].setAnchorPattern(ap1);
}

創建節點后，我們將使用TreeLayout對其進行精美布置。最初，我們創建所有具有相同坐標的節點，因此通過算法使它們彼此遠離：

var layout = new MindFusion.Graphs.TreeLayout(); layout = new MindFusion.Graphs.TreeLayout();
layout.direction = 1; //LayoutDirection.LeftToRight.direction = 1; //LayoutDirection.LeftToRight
layout.nodeDistance = 30;.nodeDistance = 30;
layout.anchoring = Anchoring.Reassign;.anchoring = Anchoring.Reassign;
diagram.arrange(layout);.arrange(layout);

至此，本教程結束。