下載Mindfusion最新版本

在本文中，我們將創(chuàng)建一個(gè)組織結(jié)構(gòu)圖，該圖使用每個(gè)員工的自定義節(jié)點(diǎn)。該圖將使用Diagramming for JavaScript庫創(chuàng)建。對(duì)于節(jié)點(diǎn)，我們使用CompositeNode類，這使我們能夠創(chuàng)建圖表節(jié)點(diǎn)，其外觀可以通過組件和布局容器的組合來定義。

一、References和HTML設(shè)置

我們要做的第一件事是為示例創(chuàng)建一個(gè)網(wǎng)頁，并添加對(duì)必要的JavaScript文件的引用。在頁面的部分中，我們提供了對(duì)以下jQuery文件的引用：

<a href="//common/jquery.min.js">//common/jquery.min.js</a>
<a href="//common/jquery-ui.min.js">//common/jquery-ui.min.js</a>

在HTML頁面的末尾，就在結(jié)束標(biāo)記之前，我們放置了對(duì)Diagramming庫使用的兩個(gè)JavaScript文件的引用：

<a href="//MindFusion.Common.js">//MindFusion.Common.js</a>
<a href="//MindFusion.Diagramming.js">//MindFusion.Diagramming.js</a>

我們的示例將其JS代碼放在一個(gè)名為Script.js的單獨(dú)文件中。我們也提到了它的引用：

<a href="//Script.js">//Script.js</a>

圖庫需要HTML Canvas來繪制自己。我們?cè)诰W(wǎng)頁中間添加一個(gè)：

<div style="width: 100%; height: 100%; overflow: auto;">
	<canvas id="diagram" width="2100" height="2100">
		This page requires a browser that supports HTML 5 Canvas element.
	</canvas>
</div>

二、OrgChartNode

在Script.js文件中，我們首先將映射添加到我們將從圖庫中使用的一些枚舉和類中：

var Diagram = MindFusion.Diagramming.Diagram;
var CompositeNode = MindFusion.Diagramming.CompositeNode;
var Behavior = MindFusion.Diagramming.Behavior;

var Alignment = MindFusion.Drawing.Alignment;
var Rect = MindFusion.Drawing.Rect;

現(xiàn)在我們調(diào)用CompositeNode 的classFromTemplate方法，該方法使用我們將提供的JSON模板生成節(jié)點(diǎn)類：

var OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",
{
component: "GridPanel",
rowDefinitions: ["*"],
columnDefinitions: ["22", "*"],
...............

在此代碼中，我們指出CompositeNode將使用的面板是GridPanel。然后我們聲明兩個(gè)列表，用于設(shè)置網(wǎng)格行和列的寬度和高度。每個(gè)數(shù)組中的成員數(shù)表示網(wǎng)格有多少行/列。在我們的例子中，我們有一行占據(jù)所有位置和兩列：一列是固定的22像素，另一列占用剩余的可用空間。

CompositeNode的JSON定義繼續(xù)使用包含子項(xiàng)的數(shù)組：

children:
[
{
component: "Rect",
name: "Background",
pen: "black",
brush: "white",
columnSpan: 2
},
{
component: "Image",
name: "Image",
autoProperty: true,
location: "ceo.png",
margin: "1",
imageAlign: "Fit"
},

第一個(gè)子節(jié)點(diǎn)使用我們稱之為“背景” 的Rect組件。它使用白色筆刷進(jìn)行渲染，具有黑色輪廓并跨越兩列，例如，它填充所有可用空間或每個(gè)節(jié)點(diǎn)。

第二個(gè)子類是一個(gè)對(duì)象。請(qǐng)注意行：

autoProperty: true

這意味著我們希望能夠?qū)⒋私M件作為屬性進(jìn)行訪問。在這種情況下，庫使用組件的名稱生成自動(dòng)set / get方法。在我們的示例中，它們將是setImage / getImage。

第三個(gè)子節(jié)點(diǎn)是StackPanel組件。這是節(jié)點(diǎn)旁邊的文本標(biāo)簽的容器。這個(gè)孩子有自己的子節(jié)點(diǎn)集合：

component: "StackPanel",
orientation: "Vertical",
gridColumn: 1,
margin: "1",
verticalAlignment: "Near",
children:
[
{
component: "Text",
name: "Title",
autoProperty: true,
text: "title",
font: "Arial bold"
},
{
component: "Text",
name: "FullName",
autoProperty: true,
text: "full name",
pen: "blue",
padding: "1,0,1,0"
},
{
component: "Text",
name: "Details",
autoProperty: true,
text: "details",
font: "Arial 3"
}

這個(gè)新StackPanel的子代是文本組件，稱為Title，F(xiàn)ullName和Details。他們將autoProperty設(shè)置為true，這意味著我們可以通過自動(dòng)setter和getter方法訪問它們的值。

下載Mindfusin最新版本

購買Mindfusion正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！