365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司使用cookie在365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的网站上给您最好的体验. 如果您继续浏览,则表示您同意365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的 隐私政策 而且 饼干的政策. cookie策略日期的图像
不幸的是,激活邮件无法发送到您的电子邮件. 请 再试一次.
Syncfusion反馈

受到世界领先公司的信任

Syncfusion可信的公司

概述

Blazor 图组件是一个用于可视化和创建图表的快速而强大的库. 它支持创建流程图、组织图、思维导图等.


流程图

Blazor 图组件将所有标准流程图形状作为现成的对象提供, 使得在一次调用中就可以很容易地将它们添加到图表表面.

使用Blazor diagram组件中可用的内置流程图形状创建的流程图


组织结构图

为组织图设计了内置的自动布局算法,自动排列父Nodes和子Nodes位置.

使用Blazor 图组件中的数据绑定和自动布局功能进行组织图可视化


思维导图

另一个内置的自动布局算法是为思维导图设计的, 允许您在关系图表面中定义哪些Nodes应该位于中心,哪些Nodes应该放置在其周围.

使用Blazor diagram库中的数据绑定和自动布局功能创建的思维导图


Nodes

使用Nodes可视化任何图形对象, 可以在Blazor图表页面上同时安排和操作. 通过Nodes,您可以:

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

Connectors

Connectors表示两个Nodes之间的关系. 下面列出了它的一些关键特性,如Connectors类型、桥接等.

Blazor 图组件中可用的不同类型的Connectors

类型

Blazor 图组件提供直线型、正交型、折线型和曲线型Connectors类型. 您可以根据图的类型或连接Nodes之间的关系选择其中的任何一种.

Blazor 图组件中的连接线跳跃行为

桥接或行跳跃

使用桥接(行跳)来说明Connectors的路由, 使得在密集的图中很容易看到连接重叠的地方.

Blazor 图组件中预定义的箭头说明了图表中的流向

箭头

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

Blazor 图组件中的Connectors外观定制

外观

与Nodes一样,Connectors外观也可以按照您想要的方式进行定制. Blazor 图组件提供了一组丰富的属性,您可以通过这些属性定制Connectors的颜色, 厚度, 虚线和圆点外观, 圆角, 甚至修饰符.


连接端口(分)

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

使用Blazor 图组件中的端口连接到Nodes上的特定位置


标签

可以通过在Nodes和Connectors上添加文本或标签来显示其他信息.

可以使用Blazor 图库中的标签在Nodes和Connectors上显示附加信息

编辑

您可以在运行时添加和编辑文本,并将不应编辑的文本标记为只读.

使用Blazor 图组件中的Label特性在Nodes和Connectors上添加多个标签

多个标签

添加任意数量的标签,并将它们分别对齐.

对齐Blazor 图组件中Nodes内部或外部的标签

对齐

标签包括复杂的对齐选项:将它们放置在Nodes内部或外部, 或者在Connectors的源端或目标端. 当Nodes或Connectors移动时,自动对齐标签.


互动功能

使用交互特性来改进运行时Blazor图的编辑体验. 此外,您可以使用鼠标、触摸屏或键盘界面轻松编辑Blazor图.

使用Blazor 图库中的处理程序选择并拖动Nodes或Connectors

选择并拖动

选择一个或多个Nodes、Connectors或注释,并使用大拇指或处理程序编辑它们.

使用Blazor 图库中的处理程序选择Nodes并调整其大小

调整

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

使用Blazor 图库中的处理程序选择和旋转Nodes

旋转

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

使用Blazor 图库中的历史管理器特性撤消和重做最近的更改

撤销和重做

当您通过错误进行编辑时,不要担心——撤消和重做命令有助于轻松地纠正最近的更改.

减少, 复制, 并使用Blazor diagram库中的剪贴板特性在图中粘贴所选对象

剪贴板

剪切、复制、粘贴,或者在Blazor图表内和图表之间复制所选择的对象.

使用Blazor diagram库中的z轴顺序特性将对象移动到图的顶部或底部

提前

精确调整Nodes, Connectors, 在拖动它们时只需捕捉到最近的网格线或对象就可以进行注释.

在Blazor 图库中将多个Nodes合并为一个组Nodes

分组

您可以将多个Nodes组合成一个组,然后作为单个对象与它们交互. 嵌套组也是可能的.

快速命令可以显示为Blazor 图库中选择器附近的按钮

快速的命令

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


对齐

365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的Blazor 图库具有预定义的对齐命令,使您能够对齐所选的对象, Nodes, 以及与选择边界相关的Connectors.

使用Blazor 图库中的间距命令以相等的间隔排列选定的对象

间距的命令

间距命令使您能够在图表上以相等的间隔放置所选对象.

调整选定对象的大小,使其在Blazor 图库中具有相同的大小

大小命令

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

使用Blazor 图库中的对齐命令水平或垂直对齐选定的对象

对齐命令

选择列表中的所有Nodes或Connectors都可以向左对齐, 正确的, 或中心水平, 或者在顶部对齐, 底, 或者选择边界在垂直方向的中间.


自动布局

使用自动布局,根据预定义的布局算法自动安排Nodes. 功能内置层次树、组织树和思维导图布局.


符号面板

包括模板画廊, 可重复使用的符号, 以及Nodes,这些Nodes可以拖放到Blazor图的表面上.

使用Blazor 图库中的符号调色板特性,在符号调色板内托管可重用Nodes


绘图工具

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

使用Blazor 图库交互式地绘制Nodes和Connectors


缩放和平移工具

仔细查看一个大图表,或者通过放大和缩小假设一个更大的视图. 另外,通过平移Blazor图,从图的一个区域导航到另一个区域.

通过在Blazor diagram组件中放大和缩小,可以近距离或更远地查看大型图表


数据绑定

使用基于来自数据源的数据创建和定位的Nodes和Connectors填充Blazor图. 除了, 任何格式的数据都可以轻松转换, 映射, 并通过设置一些属性在Blazor图表中使用, 不需要编写任何代码. Blazor 图库还支持从列表或IEnumerable集合中加载数据.

从Blazor diagram库中的外部数据源填充关系图


序列化

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

使用Blazor diagram组件将图表序列化为JSON格式,保存并加载图表


杂项

除了目前列出的所有功能, 还有很多方法可以增强绘图体验.

在Blazor 图组件中使用网格线对齐对象

网格线

网格线在尝试对齐对象时提供了指导.

使用Blazor 图组件在绘图面上定义类似页面的外观

页面布局

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


Blazor图代码示例

使用几行简单的c#代码轻松地开始使用Blazor 图,如下所示. 也探索365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司Blazor图例子 它向您展示了如何呈现图组件.

@using Syncfusion.Blazor.图
@using系统.集合.ObjectModel
@使用图形状 = Syncfusion.Blazor.图.形状
@using 图段 = Syncfusion.Blazor.图.段

@code
{
    int ConnectorsCount = 0;
    //图的引用
    Sf图Component图;
    //定义图的Nodes集合
    public 图ObjectCollection NodeCollection { get; set; }
    //定义图的Connectors集合
    public 图ObjectCollection ConnectorCollection { get; set; }

    OnInitialized()
    {
        Init图Model ();
    }

    私人空间Init图Model ()
    {
        NodeCollection = new 图ObjectCollection();
        ConnectorCollection = new 图ObjectCollection();
        CreateNode(“开始”,50岁,Flow形状.《终结者》,“开始”);
        CreateNode(“Init”,140年,Flow形状.“var i = 0;'”);
        CreateNode(“条件”,230年,Flow形状.Decision, "i < 10?");
        CreateNode(“打印”,320年,Flow形状.打印(\“你好PreDefinedProcess。!!\');");
        CreateNode(“增量”,410年,Flow形状.过程中,“我+ +;”);
        CreateNode(“结束”,500年,Flow形状.《终结者》,“结束”);
        正交段segment1 =新的正交段
        {
            类型= 图段.正交的,
            长度= 30,
            方向=方向.正确的
        };
        正交段segment2 =新的正交段
        {
            类型= 图段.正交的,
            长度= 300,
            方向=方向.底
        };
        正交段segment3 =新的正交段
        {
            类型= 图段.正交的,
            长度= 30,
            方向=方向.左
        };
        正交段segment4 =新的正交段
        {
            类型= 图段.正交的,
            长度= 200,
            方向=方向.前
        };
        CreateConnector(“开始”、“Init”);
        CreateConnector(“Init”、“条件”);
        CreateConnector(“条件”,“打印”);
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector(“打印”、“增量”,“不”);
        CreateConnector("Increment", "Condition", null, segment3, segment4);

    }
    创建一个私有的实例, 字符串targetId, 字符串标签= default(字符串), orgonalsegment segment1 = null, 正交段segment2 = null)
    {
        ConnectorsdiagramConnector =新Connectors()
        {
            ID =字符串.Connectors格式(“{0}”,+ + ConnectorsCount),
            SourceID = SourceID,
            TargetID = TargetID
        };

        diagramConnector.类型=段.正交的;
        如果(segment1 != null)
        {
            diagramConnector.段 = new 图ObjectCollection() { segment1, segment2 };
        }
        如果(标签 !=违约(string))
        {
            var注解=新的PathAnnotation()
            {
                内容=标签,
                新建TextShapeStyle() {填补= "透明"}
            };
            diagramConnector.Annotations = new 图ObjectCollection() { 注释 };
        }

        ConnectorCollection.添加(diagramConnector);
    }

    Nodes默认值(I图Object obj)
    {
        NodesNodes= obj作为Nodes;
        Nodes.宽度= 140;
        Nodes.身高= 50;
        Nodes.OffsetX = 300;
        Nodes.样式= new ShapeStyle() {Fill = "#357BD2", StrokeColor = "white"};
    }
    ConnectorDefaults(I图Object obj)
    {

        Connector = obj作为Connector;
        Connectors.类型= 图段.正交的;
        Connectors.TargetDecorator = new Decorator() {Shape = Decorator形状.箭头,宽度= 10,高度= 10};
    }
    private void CreateNode, 双y, Flow形状形状, 字符串标签, bool positionLabel = false)
    {
        ShapeAnnotation = new ShapeAnnotation() {Content = label,
            新建TextShapeStyle()
            {
                颜色=“白”,
                填补= "透明"
            }
        };
        如果(positionLabel)
        {
            注释.Margin = new Margin(){左= 25,右= 25};
        };

        Node diagramNode =新Nodes()
        {
            ID = ID,
            OffsetY = y,
            形状=新的FlowShape(){类型=形状.流量,形状=形状},
            Annotations = new 图ObjectCollection() { 注释 }
        };
        NodeCollection.添加(diagramNode);
    }
}

其他支持框架

图表组件也可用于JavaScript, 角, 反应, 和Vue框架, 从它自己的TypeScript库构建. 从以下链接查看不同的图平台:




Blazor组件- 70+ UI和DataViz组件

常见问题

  • 可视化、创建和编辑交互图.
  • 快速的加载时间、丰富的UI交互和键盘导航.
  • 负载范围广泛,性能最佳的Nodes.
  • 流程图支持、许多内置形状和灵活的数据绑定.
  • 轻松地在布局(如组织图)中安排图表组件, 思维导图, 径向树, 和层次树.
  • 市场上最好的Blazor 图库之一, 提供功能丰富的UI与软件交互.
  • 简单的配置和API.
  • 支持所有现代浏览器.
  • 移动触摸友好和响应.
  • 广泛的 演示 而且 视频 帮助您快速学习和开始.

365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司不单独销售Blazor 图组件. 它只能作为Syncfusion Blazor套件的一部分购买, 里面含有超过70种本土的Blazor成分, 包括图. 的单一开发人员许可 Syncfusion Blazor套件 成本 $995.00美元,并包括一年的支持和更新. 最重要的是,365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司可能会根据目前活跃的促销活动提供额外的折扣. 请365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司 销售团队 今天看看你是否有资格获得额外的折扣.

No. 365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的70个Blazor组件,包括图,不是单独出售的. 它们只是作为一个整体. 然而, 365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司对产品的定价很有竞争力,所以它的价格只比一些其他供应商单独的图价格高一点. 365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司也发现, 在365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的经验, 365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的客户通常一开始使用365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的一种产品,然后很快扩展到几种产品, 所以365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司认为最好以固定的费用提供所有70个Blazor组件 995美元/开发人员. 最重要的是,365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司可能会根据目前活跃的促销活动提供额外的折扣. 请365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司 销售团队 今天看看你是否有资格获得额外的折扣.

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

独立阅读,
认证审核
在G2

立即下载

365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的客户是怎么评价365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的?

双引号

Syncfusion控件几乎包含了开发人员需要的所有东西,为365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司节省了时间和金钱. 所有的支持都是无与伦比的. Syncfusion控件是开发人员的梦想成真.
凯文·克尔

凯文·克尔

Kirk-Rudy

双引号

我强烈推荐使用Essential Studio,并发现Syncfusion支持团队是我工作过的最快的团队之一.
Georg Kukula

Georg Kukula

G&W Software Entwicklung GmbH

今天通过下载365平台app- 365手机版APP下载-apple app store排行榜-365手机有限公司的免费评估版本来改变您的应用程序 下载免费试用

伟大——说你有伟大是一回事,但当别人认可你的伟大时,它的意义就更大了. Syncfusion自豪地举办了以下行业奖项.

向上箭头图标

警告图标 您使用的是过时版本的Internet Explorer,可能无法显示本网站和其他网站的所有功能. 请升级至ie8或更新版本,以获得更好的体验.关闭图标

移动端实时聊天图标