Mindfusion教程:带有剪切图像的自定义图表节点(上)

翻译|使用教程|编辑:王香|2019-03-26 13:47:42.000|阅读 26 次

概述:在本文中,我们将创建一个组织结构图,该图使用每个员工的自定义节点。该图将使用Diagramming for JavaScript库创建。对于节点,我们使用CompositeNode类,这使我们能够创建图表节点,其外观可以通过组件和布局容器的组合来定义。

相关链接:

下载Mindfusion最新版本

在本文中,我们将创建一个组织结构图,该图使用每个员工的自定义节点。该图将使用Diagramming for JavaScript库创建。对于节点,我们使用CompositeNode类,这使我们能够创建图表节点,其外观可以通过组件和布局容器的组合来定义。

Mindfusion

一、References和HTML设置

我们要做的第一件事是为示例创建一个网页,并添加对必要的JavaScript文件的引用。在页面的部分中,我们提供了对以下jQuery文件的引用:

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

在HTML页面的末尾,就在结束标记之前,我们放置了对Diagramming库使用的两个JavaScript文件的引用:

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

我们的示例将其JS代码放在一个名为Script.js的单独文件中。我们也提到了它的引用:

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

图库需要HTML Canvas来绘制自己。我们在网页中间添加一个:

<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;

现在我们调用CompositeNode 的classFromTemplate方法,该方法使用我们将提供的JSON模板生成节点类:

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

在此代码中,我们指出CompositeNode将使用的面板是GridPanel。然后我们声明两个列表,用于设置网格行和列的宽度和高度。每个数组中的成员数表示网格有多少行/列。在我们的例子中,我们有一行占据所有位置和两列:一列是固定的22像素,另一列占用剩余的可用空间。

CompositeNode的JSON定义继续使用包含子项的数组:

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

第一个子节点使用我们称之为“背景” 的Rect组件。它使用白色笔刷进行渲染,具有黑色轮廓并跨越两列,例如,它填充所有可用空间或每个节点。

第二个子类是一个对象。请注意行:

autoProperty: true

这意味着我们希望能够将此组件作为属性进行访问。在这种情况下,库使用组件的名称生成自动set / get方法。在我们的示例中,它们将是setImage / getImage。

第三个子节点是StackPanel组件。这是节点旁边的文本标签的容器。这个孩子有自己的子节点集合:

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"
}

这个新StackPanel的子代是文本组件,称为Title,FullName和Details。他们将autoProperty设置为true,这意味着我们可以通过自动setter和getter方法访问它们的值。

下载Mindfusin最新版本

购买Mindfusion正版授权,请点击“咨询在线客服”哟!

慧都315特惠


标签:图表图表控件

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
MindFusion.Diagramming for ActiveX

它能帮助你创建工作流图,流程图和图表处理

MindFusion.Diagramming for WinForms

FlowChart.NET是一款能够帮助你轻松创建流程图和示意图的.NET控件,可以自定义设计样式和图表框颜色。

MindFusion.Diagramming for ASP.NET

ASP.NET下灵活的图表组件

MindFusion.Diagramming for Java

为您图表的自定义以及个性化提供了多种不同选项

MindFusion.Scheduling for WinForms

帮助你管理时间以及重新安排即将到来的预约与事件

MindFusion.Diagramming for WPF

创建任何类型示意图包括流程图、方案图、类层次图、树形图和算法等在内的理想的图形工具。

MindFusion.WinForms Pack

专业的多功能Winforms图表控件套包

MindFusion.WPF Pack

集合了图表控件、日程控件以及报表控件,用于创建所有类型的流程图、方案、图形、表格、图表、日程、调度、商业报表、计量表等

MindFusion ASP.NET Pack

为程序员构建图表、流程图、日程安排、图表等等提供一系列理想的工具集

MindFusion.Silverlight Pack

帮助你快速开发图表、日历、表格和报表

MindFusion.Scheduling Pack

提供一整套完备的功能用于创建日程表、时间、资源表和调度表

MindFusion.Reporting for WinForms

原生的Windows Forms编程组件,可为任何.NET应用程序提供专业的报表功能

MindFusion.Reporting for WPF

智能编程型报表组件,具有强大的可视化和编辑关系数据的功能

MindFusion.Reporting for Silverlight

为你快速创建及定制报表

MindFusion.Scheduling for ASP.NET

为WebForms应用程序提供一个完整的功能集,用于显示日程表、时间表、日程安排、资源视图等

MindFusion.Scheduling for WPF

快速为你的WPF应用程序添加一个完整的日程表和时间管理功能集

MindFusion.Scheduling for Silverlight

具有时尚外观且易于使用的时间管理组件

MindFusion.Charting for WPF

轻松为你的WPF应用程序添加漂亮的仪表板

MindFusion.Charting for WinForms

WinForms应用程序完美的图表解决方案

MindFusion Diagramming Pack

支持iOS、Android等10多个平台的强大图表库

MindFusion.Charting for Silverlight

为您的Silverlight应用程序创建漂亮的图表

MindFusion.Charting for WebForms

适用于任何ASP.NET应用程序的完美图表控件

MindFusion.Charting for Android

用简单易懂的图表呈现您的数据,可以在任何Android设备上运行,让您的应用脱颖而出!

MindFusion.Scheduling for Java

专为智能Java应用程序打造的智能日历

MindFusion.Scheduling for Xamarin

Android和iOS应用程序项目管理功能、风格和性能的完美组合

MindFusion.Scheduling for .NET CF

为使用Microsoft .NET Compact Framework的应用程序设计的计划和时间安排组件

MindFusion.Mapping for WinForms

拥有创建、定制和显示地图的全套功能

MindFusion.Mapping for WPF

快速且容易地为Wpf应用程序添加一个漂亮的地图

MindFusion Pack for Java Swing

MindFusion Pack for Java Swing是一款有效的JAVA工具。

MindFusion Xamarin Pack

MindFusion Xamarin Pack是适用于独立于平台的应用程序的一组独特控件。使用MindFusion专业控件加速您的Xamarin应用程序的开发,为您提供需要数月才能开发的即用型功能。

MindFusion Diagram for UWP

MindFusion Diagram for UWP是一款WINRT的图表库,使您的移动应用程序在Windows shop中脱颖而出,其中包含易于构建和自定义的图表

MindFusion Wpf Gantt Chart

Wpf Gantt Chart.MindFusion包含在MindFusion.Scheduling for WPF里,MindFusion.Scheduling for WPF是一款添加日程表、时间表和资源视图的适用于WPF的调度工具。

MindFusion iOS Diagram

MindFusion iOS Diagram是一个原生的Swift组件,它提供了一个强大的功能集,可以让您呈现任何类型的流程图,组织结构图,类图,层次结构,树和图。

MindFusion Android Diagram

MindFusion Android Diagram可以为任何类型的Android设备构建图表。

MindFusion Wpf Gantt Chart & Gauge

MindFusion Wpf Gantt Chart & Gauge是一款结合了2D和3D图表、仪表和高级实时图表控制的WPF组件。

MindFusion ASP.NET Scheduler

一个非常易于使用和自定义的ASP.NET调度组件。

MindFusion Java Swing Chart

MindFusion Java Swing Chart不仅是可用于渲染图表的普通编程工具,还是可组合排列图表、仪表和UI元素、创建高级数据可视化解决方案的智能组件。

MindFusion ASP.NET Chart

MindFusion ASP.NET Chart包含在MindFusion.Charting for WebForms里,MindFusion.Charting for WebForms是一款适用于任何ASP.NET应用程序的完美图表控件。

MindFusion JavaScript Chart

MindFusion JavaScript Chart结合了2D和3D图表、金融图表、仪表和仪表板,提供了优秀的API 、丰富的事件集、无限数量和类型的数据系列以及在JavaScript和HTML中创建完美数据可视化所需的一切。

MindFusion Xamarin Diagram

MindFusion Xamarin Diagram是一款Xamarin.Forms流程图控件。

MindFusion Wpf Virtual Keyboard

MindFusion Wpf Virtual Keyboard是一款外观和感觉像移动应用程序的WPF应用程序,可提供与触摸屏应用程序相同的可访问性。

MindFusion Xamarin Chart

MindFusion Xamarin Chart是用于仪表板、2D和3D图表的Xamarin Forms组件,有丰富的图表类型集、多个数据选项和样式设置。

MindFusion WinForms Virtual Keyboard

MindFusion WinForms Virtual Keyboard是适用于每个WinForms应用程序的全功能屏幕键盘,内置键盘布局、主题和广泛的API文档。

MindFusion Java Swing Virtual Keyboard

MindFusion Java Swing Virtual Keyboard是用于Java Swing软件的屏幕键盘。

MindFusion Wpf Spreadsheet

MindFusion Wpf Spreadsheet是WPF的电子表格,可在应用程序中实现熟悉的类似Excel的功能。

MindFusion WinForms Spreadsheet

MindFusion WinForms Spreadsheet是MindFusion WinForms电子表格控件,是一个功能强大的.net电子表格组件,具有编辑、样式化和格式化大量数据的强大功能。

MindFusion Java Swing Spreadsheet

MindFusion Java Swing Spreadsheet是适用于Java的电子表格。能快速创建任何类型的电子表格。添加各种图表、数据功能并根据需要设置样式,结果可以导出为不同的格式。

在线客服 在线QQ 电话咨询
400-700-1020
在线客服系统
live chat