We use 饼干 to give you the best experience on our website. 如果您继续浏览,则表示您同意十博体育app 隐私政策饼干的政策. cookie策略日期的图像
不幸的是,激活邮件不能发送到您的电子邮件. 请 再试一次.
Syncfusion反馈

深受世界领先企业信赖

Syncfusion可信的公司

概述

The 反应 图 is a feature-rich architecture diagram library for visualizing, 创建, 以及编辑交互式图表. 它支持创建流程图, 组织图表, 思维导图, 和BPMN图表要么通过代码要么通过可视界面.


流程图

反应 图提供了所有标准的流程图形状作为现成的对象来构建流程图, making it is easy to add them to a diagram surface in a single call.

流程图图 created with built-in flowchart shapes available in 反应 图


组织结构图

Arrange the parent 和 child node positions automatically with a built-in, automatic layout algorithm specifically made for 组织图表.

组织图表可视化使用反应 图中的数据绑定和自动布局特性


思维导图

The automatic layout algorithm is also built for mind map diagrams. 您可以定义图面上哪个Nodes应该位于中心,哪些Nodes应该放置在中心Nodes周围.

思维导图创建与数据绑定和自动布局功能,可在反应 diagram


Nodes

使用Nodes可视化任何图形对象, which can be arranged 和 manipulated at the same time on a diagram page. 它们允许以下事项:

  • 使用许多预定义的标准形状.
  • 创建和添加自定义形状容易.
  • 完全定制Nodes外观.
  • 设计一个NodesUI模板,并跨多个Nodes重用它.

Connectors

Connectors表示两个Nodes之间的关系.

反应 图中提供了不同类型的Connectors

类型

The 反应 图 provides straight, orthogonal, polyline, curved connector types. 您可以根据连接Nodes之间的关系或关系类型选择其中任何一种.

反应 图中的Connectors跳转行为

桥接或线路跳转

使用桥接(换行)来说明Connectors的路由, making it easy to read w在这里 Connectors overlap each other in a dense diagram.

Predefined arrowheads in 反应 图 illustrate flow direction in the diagram

箭头

使用不同类型的预定义箭头来说明流程图中的流程方向. 您还可以构建自己的自定义箭头.

反应 图中的Connectors外观定制

外观

Like Nodes, the connector look 和 feel can also be customized any way you want. 反应 图组件提供了一组丰富的属性,您可以通过这些属性定制Connectors颜色, 厚度, 破折号和圆点外观, 角落, 甚至修饰符.


连接端口(分)

通过不同类型的端口或连接点将Connectors连接到Nodes的特定位置.

Connect to specific places on a node using ports in the 反应 图


标签

Additional information can be shown by adding text or labels on Nodes 和 Connectors.

Additional information can be shown on Nodes 和 Connectors using labels in 反应 图

编辑

You can add 和 edit text at runtime 和 mark it read-only if it should not be edited.

Add multiple labels on Nodes 和 Connectors using Label feature in 反应 图

多个标签

添加任意数量的标签,并单独对齐它们.

对齐反应 图中Nodes内部或外部的标签

对齐

标签 include sophisticated alignment options: Place inside or outside a node, 或在Connectors的源端或目标端. 当Nodes或Connectors移动时自动对齐.


互动功能

Use interactive features to improve the editing experience of a diagram at runtime. Furthermore, you can easily edit a diagram with mouse, touchscreen, or 键盘 interfaces.

选择并拖动 the Nodes or Connectors using h和lers in 反应 图

选择并拖动

选择一个或多个Nodes、Connectors或注释,并使用拇指或处理程序对其进行编辑.

使用反应 图中的处理程序选择Nodes并调整Nodes大小

调整

您可以在八个不同的方向上调整Nodes的大小,并锁定Nodes的纵横比以保持其形状. 您还可以同时调整多个对象的大小.

使用反应图中的处理程序选择和旋转Nodes

旋转

将选定的Nodes从0旋转到360度.

撤销和重做 the recent changes using history manager feature in 反应 图

撤销和重做

当错误编辑时,不要担心——撤消和重做命令可以帮助您轻松地纠正最近的更改.

使用反应 diagram中的剪贴板功能剪切、复制和粘贴图中的选定对象

剪贴板

Cut, copy, paste, or duplicate selected objects within 和 across diagrams.

使用反应 diagram中的z-order特性将对象移动到图表的顶部或底部

z值

当多个物体重叠时, the z-order controls which object is at the top 和 which is at the 底.

Align Nodes 和 Connectors with the nearest gridlines or objects in 反应 图

提前

精确调整Nodes, Connectors, annotations while dragging just by snapping to the nearest gridlines or objects.

在反应 图中将多个Nodes合并成一个组Nodes

分组

您可以将多个Nodes组合成一个组,然后将它们作为单个对象进行交互. Nested groups are also possible with our 反应 图 component.

快速的命令 can be shown as buttons near a selector in 反应 图

快速的命令

经常使用的命令,如删除,连接和复制可以显示为按钮附近的选择器. 这使得用户可以很容易地快速执行这些操作,而不是在工具箱中搜索正确的按钮.


对齐

十博体育app的反应 图有预定义的对齐命令,可以让你根据选择边界对齐选定对象的Nodes和Connectors.

Arrange selected objects in equal intervals using spacing comm和s in 反应 图

间距的命令

间距命令使您能够将选择的对象以彼此之间相等的间隔放置在关系图上.

在反应图中调整所选对象的大小,使其具有相同的大小

大小命令

使用大小调整命令使所选Nodes相对于第一个所选对象的大小相等.

使用反应 图中的对齐命令水平或垂直对齐选中的对象

对齐命令

All the Nodes or Connectors in the selection list can be aligned at the left, 正确的, 或中心水平, 或者在顶部对齐, 底, 或者是选择边界的垂直中间.


自动布局

Arrange Nodes automatically based on a predefined layout algorithm. 特性 a built-in hierarchical tree, radial tree, symmetric layouts.


统治者

标尺允许您测量从页面原点到Nodes或Connectors的距离. 这在创建比例模型时特别有用.

使用反应 图中的标尺特性测量Nodes到页面原点的距离


符号面板

反应图表包括一个画廊的模板, 可重复使用的符号, 以及可以拖到图表表面的Nodes.

使用反应 图中的符号调色板特性在符号调色板中宿主可重用Nodes


概述面板

概览面板允许您在探索大型图表时改善导航体验. 它显示了完整图表页面的一个小预览,允许用户在其中缩放和平移.

通过使用反应 图中的概览面板来改进使用较大图表的导航体验


绘图工具

绘制所有类型的内置Nodes,并通过单击和拖动绘图区域交互式地将它们与Connectors连接.

使用反应 图交互式地绘制Nodes和Connectors


缩放和平移工具

View a large diagram closely or assume a wider view by zooming in 和 out. Also, navigate 从 one region of a diagram to another by panning across the diagram.

View a large diagram closely or farther away by zooming in 和 out in 反应 图


数据绑定

使用基于来自数据源的数据创建和定位的Nodes和Connectors填充图. 任何格式的数据都可以很容易地转换, 映射, 并通过设置一些属性在图中被使用, 无需编写任何代码. 反应 图组件还支持从列表或IEnumerable集合中加载数据.

Populate the diagram 从 external data sources in 反应 图


出口

You can 出口 a diagram to different image files such as PNG, JPEG, BMP, SVG.

Export the diagram to different image formats using 反应 图


印刷

从浏览器打印图表. 您还可以自定义页面大小, 取向, 和页面边缘, 并将一个图表放在一页纸上.

使用反应 图从浏览器打印图表


序列化

您可以将关系图状态保存为JSON格式,并在稍后使用序列化器将其加载回来进行进一步编辑.

Save 和 load a diagram by serializing it to JSON format using 反应 图


杂项

除了目前列出的所有特性之外, 还有更多增强图表绘制体验的功能.

在反应 图中使用网格线对齐对象

网格线

网格线提供了对齐对象的指导.

Define page-like appearance on the drawing surface using 反应 图

页面布局

使用页面大小、方向和页边距为绘图表面提供类似于页面的外观.

Additional information about a node can be viewed by using tooltips in 反应 图

工具提示

使用工具提示提供关于Nodes的附加信息.

Use context menu feature to map frequently used comm和s in 反应 图

上下文菜单

轻松地将常用命令映射到上下文菜单.


其他支持框架

图表组件也可以在Blazor、Vue、角和JavaScript框架中使用. Check out the different 图 platforms 从 the links below,


反应图代码示例

使用下面演示的几行简单的TSX代码就可以轻松地开始使用反应 图. 也探索十博体育app反应图的例子 它向你展示了如何在反应中渲染和配置图表.

进口 * as 反应  "反应";
进口 "./应用程序.css";
//导入图组件
进口 { 图组件 }  "@syncfusion / ej2-反应-diagrams";

出口 默认的 class 应用程序 扩展 反应.组件<{}, {}> {
  渲染() {
    返回 <图组件 id=“图” />;
  }
}



65+反应UI组件

常见问题

十博体育app不单独销售反应图表. It is only available for purchase as part of the Syncfusion反应 suite, 包含超过70种反应组件, 包括图. 的单一开发人员许可 Syncfusion Essential Studio for 反应 suite 成本 $995.00美元包括一年的支持和更新. 除此之外,十博体育app还可以根据当前活跃的促销活动提供额外的折扣. 请十博体育app 销售团队 看看你是否有资格获得额外的折扣.

你可以找到十博体育app的反应 图演示 在这里.

不,十博体育app的70个反应组件,包括图,并不是单独出售的,而是作为一个包出售的. 然而, 十博体育app的产品定价有竞争力,所以它的成本只比一些其他供应商收取的图表稍微多一点. 十博体育app也发现, 在十博体育app的经验, 十博体育app的客户通常开始使用十博体育app的一种产品,然后迅速扩展到几种产品, so we felt it was best to offer all 70 反应 components for a flat fee of 995美元/开发人员. 除此之外,十博体育app还可以根据当前活跃的促销活动提供额外的折扣. 请十博体育app 销售团队 看看你是否有资格获得额外的折扣.

不,这是一个商业产品,需要付费许可证. 然而,一个 免费的社区许可 也适用于年总收入少于100万美元的公司和个人以及5个或更少的开发者.

一个好的开始是十博体育app的综合 开始文档.

独立阅读,
认证审核
在G2

立即下载 定价

十博体育app的客户如何评价十博体育app?

双引号

We're using the file formats 和 Windows/JavaScript list controls a lot. They're fast, easy to use, the 文档 is good 和 contains examples. Tickets with questions or suggestions were answered within a day, 所以十博体育app很乐意使用Syncfusion库.
丹尼尔Persidok

丹尼尔Persidok

wpd在岸GmbH是一家 & Co. KG

双引号

使用Syncfusion、角和JavaScript控件让前端web开发变得轻而易举. Each component has many properties that can be configured as per your desire, 可用于与元素交互的方法, 很多事件都发生在不同的阶段, 这使得根据应用程序的状态修改组件变得很容易. 此外,他们的支持也是惊人的! 他们总是提供一个工作项目的样本, which makes it very simple to solve your question about your code.
卡洛斯·加西亚

卡洛斯·加西亚

Vistatec

Transform your applications today by downloading our free evaluation version 下载免费试用

Greatness—it’s one thing to say you have it, but it means more when others recognize it. synfusion很荣幸举办以下行业奖项.

向上箭头图标

警告图标 您使用的是过时版本的Internet Explorer,可能无法显示本网站和其他网站的所有功能. Upgrade to Internet Explorer 8 or newer for a better experience.关闭图标

移动实时聊天图标
友情链接: 1 2 3 4 5 6 7 8 9 10