十博体育app使用饼干在十博体育app的网站上给你最好的体验. 如果您继续浏览,则表示您同意十博体育app 隐私政策饼干的政策. 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跳转行为

桥接或线路跳转

使用桥接(换行)来说明Connectors的路由, 这使得在密集的图表中很容易看到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的大小,并锁定Nodes的纵横比以保持其形状. 您还可以同时调整多个对象的大小.

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

旋转

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

使用Blazor 图库中的历史管理器功能撤销和重做最近的更改

撤销和重做

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

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

剪贴板

剪切、复制、粘贴或复制Blazor图内或跨Blazor图的选定对象.

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

提前

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

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

分组

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

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

快速的命令

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


对齐

十博体育app的Blazor 图库有预定义的对齐命令,使您能够对齐选定的对象, Nodes, 以及关于选择边界的Connectors.

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

间距的命令

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

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

大小命令

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

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

对齐命令

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


自动布局

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


符号面板

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

使用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 图,如下所示. 也探索十博体育appBlazor图例子 ,它向您展示了如何呈现图表组件.

@using Syncfusion.Blazor.图
@using系统.集合.ObjectModel
@using 图形状 = 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形状.《十博体育APP下载》,“开始”);
        CreateNode(“Init”,140年,Flow形状.var i = 0;');
        CreateNode(“条件”,230年,Flow形状.Decision, "i < 10?");
        CreateNode(“打印”,320年,Flow形状.打印(\“你好PreDefinedProcess。!!\');");
        CreateNode(“增量”,410年,Flow形状.过程中,“我+ +;”);
        CreateNode(“结束”,500年,Flow形状.《十博体育APP下载》,“结束”);
        = new OrthogonalSegment()
        {
            类型= 图段.正交的,
            长度= 30,
            方向=方向.正确的
        };
        = new OrthogonalSegment()
        {
            类型= 图段.正交的,
            长度= 300,
            方向=方向.底
        };
        = new OrthogonalSegment()
        {
            类型= 图段.正交的,
            长度= 30,
            方向=方向.左
        };
        = new OrthogonalSegment()
        {
            类型= 图段.正交的,
            长度= 200,
            方向=方向.前
        };
        CreateConnector(“开始”、“Init”);
        CreateConnector(“Init”、“条件”);
        CreateConnector(“条件”,“打印”);
        CreateConnector(“条件”,“结束”,“是”,segment1, segment2);
        CreateConnector(“打印”、“增量”,“不”);
        CreateConnector("Increment", "Condition", null, segment3, segment4);

    }
    private void CreateConnector(string sourceId, 字符串targetId, String label = default(String), segment1 = null, segment2 = null)
    {
        ConnectorsdiagramConnector = new Connector()
        {
            ID =字符串.Connectors格式(“{0}”,+ + ConnectorsCount),
            SourceID = SourceID,
            TargetID = TargetID
        };

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

        ConnectorCollection.添加(diagramConnector);
    }

    NodeDefaults(I图Object obj)
    {
        NodesNodes= obj作为Nodes;
        Nodes.宽度= 140;
        Nodes.身高= 50;
        Nodes.OffsetX = 300;
        Nodes.Style = new ShapeStyle() {Fill = "#357BD2", StrokeColor = "白色"};
    }
    private void ConnectorDefaults(I图Object obj)
    {

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

        NodesdiagramNode = new Node()
        {
            ID = ID,
            OffsetY = y,
            Shape = new FlowShape(){类型=形状.Flow, Shape = Shape},
            Annotations = new 图ObjectCollection() { 注释 }
        };
        NodeCollection.添加(diagramNode);
    }
}

其他支持框架

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




Blazor组件- 70+ UI和DataViz组件

常见问题

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

十博体育app不单独销售Blazor图组件. 它只能作为Syncfusion Blazor套件的一部分购买, 含有超过70种天然Blazor成分, 包括图. 的单一开发人员许可 Syncfusion Blazor套件 成本 $995.00美元,包括一年的支持和更新. 除此之外,十博体育app还可以根据当前活跃的促销活动提供额外的折扣. 请十博体育app 销售团队 看看你是否有资格获得额外的折扣.

您可以找到十博体育app的Blazor图演示 在这里.

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

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

独立阅读,
认证审核
在G2

立即下载

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

双引号

Syncfusion控件几乎包含了开发人员想要的所有东西,为十博体育app节省了时间和金钱. 所有的支持都是无与伦比的. Syncfusion控件是开发人员的梦想成真.
凯文·克尔

凯文·克尔

Kirk-Rudy

双引号

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

Georg Kukula

G&W软件公司

今天通过下载十博体育app的免费评估版本来改变您的应用程序 下载免费试用

伟大——说你拥有它是一回事,但当别人意识到它时,它意味着更多. synfusion很荣幸举办以下行业奖项.

向上箭头图标

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

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