深受世界领先企业的信赖
< / div >
< / div >
< / div >
< / div >
< div 类="col-lg-1 col-md-2 col-sm-1 col-xs-12 vcenter agreebutton">
< / div >
< / div >
< / div >
< / div >
< div id="ie-notification" style="display:none">
< div 类="container">
< div 类="row">
< div 类="col-lg-11 col-md-11 col-sm-11 col-xs-9 error-message">
微软已经停止对旧版本IE的支持. 为获得最佳体验，请升级到最新版本的IE，或在其他浏览器中查看此页.
< / div >
< div 类="col-lg-1 col-md-1 col-sm-1 col-xs-3 close-button">
< / div >
< / div >
< / div >
< / div >
< div 类="unconfirmed-error-notification hide">
< div 类="container">
< div 类="row">
< div 类="col-lg-12 col-md-12 col-sm-12 col-xs-11 unconfirmed-error-message small">
很遗憾，激活邮件无法发送到您的邮箱. 请 再试一次.
< / div >
< / div >
< / div >
< div 类="user-not-activated-close activation-unconfirmed-error-notification-close" id="close-icon-not-activated">
< / div >
< / div >
< div id="menu-wrapper">
< div 类="bar bar-3 bar--sm bg--secondary" id="sub-menu-section">
< div 类="container">
< div 类="row">
< div 类="col-md-12 col-sm-12 col-xs-12 text-正确的 text-left-xs text-left-sm">
< div 类="bar__module">
< div 类="marketing-banner col-md-9 col-sm-8 col-xs-12">
BoldSign轻松嵌入签名在您的 .网络应用. 免费的沙箱 有本地SDK可用.
< / div >
< / div >
< div 类="hide" id="feedbacks-dialogue">< / div >
< div 类="modal fade" data-easein="slideLeftIn" id="feedbacks-dialogue_wrapper" role="dialog">
< div 类="modal-dialogs">
< div 类="modal-content">
< div 类="feedbackClose" data-dismiss="modal" data-easein="slideLeftIn" id="feedbackcloseicon">< / div >
< div 类="modal-header">
< div id="feedback-title">反馈 & 问题< / div >
< div 类="content-extra-smalls" id="feedbackDescription"> 请与十博体育app分享您的意见和问题< / div >
< div id="cookie-error">
< div 类="col-lg-10 col-md-10 col-sm-10 col-xs-9 errormessage">
请使 饼干 在浏览器中
< / div >
< div 类="col-lg-2 col-md-2 col-sm-2 col-sm-3 close-icon-message">
< / div >
< / div >
< / div >
< div 类="thankyou-message hide">
< div 类="feedback-confirmation">感谢您的反馈和意见. 十博体育app将很快处理此请求，并在需要时回复您. < / div >
< div>
< / div >
< / div >
< / div >
< / div >
< / div >
< div 类="popular-banner list-template video-banner bg-lazy" id="whitebackground" style="background-image: url(/products/essential-js2/control/images/图/javascript-图-banner.png); background-image: url(/products/essential-js2/control/images/图/javascript-图-banner.png)">
< div 类="container">
< div 类="row">
< div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12">
< div 类="modal fade" id="video-modal">
< div 类="vertical-alignment-helper">
< div 类="modal-dialog vertical-align-center">
< div 类="modal-content">
< div 类="modal-body" id="banner-video-iframe-section">
< div allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" id="videoFrame">< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
JavaScript js图
< / div > < div 类="col-lg-4 hidden-md hidden-sm hidden-xs" id="导航-link"> < div 类="hide all-control-content"> 探索其他控件 < / div > < / div > < div 类="正确的-panel col-lg-4 col-md-6 col-sm-6 col-xs-4"> < / div > < div 类="hidden-lg col-md-12 col-sm-12 col-xs-12" id="mobile-导航-link"> < div 类="hide all-control-content"> 探索其他控件 < / div > < / div > < / div > < / div > < / div > < div 类="featuretour-markdown" id="featuretour-markdown"> < div 类="container"> < div 类="col-sm-12 col-xs-12 other-controls" id="control-content"> < div 类="row ft-one-column segment">JavaScript 图是一个功能丰富的架构图库，用于可视化, 创建, 编辑交互式图表. 它支持创建流程图, 组织图表, 思维导图, BPMN通过代码或可视化界面进行绘图.
< / div >JavaScript 图库提供了所有标准流程图形状作为现成的对象来构建流程图, 在单个调用中将它们添加到图表面是很容易的.
< / div > < / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small">
自动排列父Nodes和子Nodes的位置, 专门为组织结构图设计的自动布局算法.
< / div > < / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small">
自动布局算法也建立了思维导图. 您可以定义哪些Nodes应该位于图表面的中心，哪些Nodes应该放置在图表面的中心Nodes周围.
< / div > < / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small">
使用Nodes可视化任何图形对象, 哪些可以在图表页面上同时安排和操作. 它们允许以下内容:
< div 类="carousel-caption">使用JavaScript 图库中的基本形状功能可视化几何信息< / div >
< / div >
< div 类="item">
< div 类="carousel-caption">使用JavaScript图表库中的BPMN形状功能创建BPMN图表< / div >
< / div >
< div 类="item">
< div 类="carousel-caption">使用JavaScript 图库在Nodes内嵌入图像、HTML或SVG内容< / div >
< / div >
< / div >
以前的
下一个
< / div >
< / div >
Connectors表示两个Nodes之间的关系.
< / div > < div 类="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents"> < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
JavaScript图表与丰富的UI提供了直接, 正交, 多段线, 弯曲接头类型. 您可以根据图的类型或连接Nodes之间的关系选择其中的任何一种.
< / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
使用桥接(线跳)来说明Connectors的路由, 使其易于阅读Connectors在密集图中相互重叠的位置.
< / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
使用不同类型的预定义箭头来说明流程图中的流向. 您还可以构建自己的自定义箭头.
< / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
与Nodes一样，Connectors的外观也可以按照您想要的方式进行定制. JavaScript 图控件提供了一组丰富的属性，您可以通过这些属性自定义Connectors的颜色, 厚度, 虚线和圆点外观, 角落, 甚至是装饰师.
< / div > < / div > < / div >通过不同类型的端口或连接点将Connectors连接到Nodes上的特定位置.
可以通过在Nodes和Connectors上添加文本或标签来显示其他信息.
< / div > < div 类="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents"> < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
您可以在运行时添加和编辑文本，并在不应该编辑时将其标记为只读.
添加任意数量的标签并单独对齐它们.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
标签包括复杂的对齐选项:放置在Nodes内部或外部, 或者在Connectors的源端或目标端. 当Nodes或Connectors移动时自动对齐.
< / div > < / div > < / div >使用交互特性可以在运行时改进图的编辑体验. 此外，您可以轻松地使用鼠标、触摸屏或键盘界面编辑图表.
< / div > < div 类="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents"> < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
选择一个或多个Nodes、Connectors或注释，并使用拇指或处理程序编辑它们.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
您可以在八个不同的方向上调整Nodes的大小，并锁定Nodes的长宽比以保持其形状. 您还可以同时调整多个对象的大小.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
从0到360度旋转选定的Nodes.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
当您编辑错误时，不要担心撤销和重做命令可以帮助您轻松地纠正最近的更改.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
剪切、复制、粘贴或复制图内和图间的选定对象.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
当多个对象重叠时, z轴顺序控制哪个对象在顶部，哪个在底部.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
精确对齐Nodes, Connectors, 以及在拖动时通过抓取最近的网格线或对象进行注释.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
您可以将多个Nodes组合成一个组，然后作为单个对象与它们交互. 嵌套组也可以用JavaScript 图控件实现.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
经常使用的命令，如删除、连接和复制，可以显示为选择器附近的按钮. 这使得用户可以轻松地快速执行这些操作，而不必在工具箱中搜索正确的按钮.
< / div > < / div > < / div >十博体育app的JavaScript 图 Library有预定义的对齐命令，使您能够根据选择边界对齐所选对象的Nodes和Connectors.
< / div > < div 类="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents"> < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
间距命令使您能够以相等的间隔将选定的对象放置在图表上.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
使用大小调整命令使所选Nodes相对于第一个选定对象的大小相等.
< / div > < div 类="col-lg-4 col-md-6 col-sm-12 col-xs-12 three-col-content">
选择列表中的所有Nodes或Connectors都可以向左对齐, 正确的, 或者水平居中, 或者在顶部对齐, 底, 或者相对于选择边界垂直的中间位置.
< / div > < / div > < / div >根据预定义的布局算法自动排列Nodes. 具有内置的分层树、径向树和对称布局.
< / div > < / div > < div 类="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-content-small"> < div 类="carousel slide" data-ride="carousel" id="y8wd1053qly7o">
< div 类="carousel-caption">使用JavaScript 图库构建径向树布局< / div >
< / div >
< div 类="item">
< div 类="carousel-caption">使用JavaScript图表库构建分层树布局< / div >
< / div >
< div 类="item">
< div 类="carousel-caption">使用JavaScript图表库构建对称布局< / div >
< / div >
< / div >
以前的
下一个
< / div >
< / div >
< / div >
标尺允许您测量Nodes或Connectors到页面原点的距离. 这在创建比例模型时特别有用.
< / div > < / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-content-small">
JS 图控件包括一个模板库, 可重复使用的符号, 以及可以拖到图表表面上的Nodes.
概览面板允许您在浏览大型图表时改善导航体验. 它显示整个图表页面的一个小预览，允许用户在其中缩放和平移.
< / div > < / div > < div 类="col-lg-4 col-md-4 col-sm-12 col-xs-12 col-content-small">
绘制各种内置Nodes，并通过在绘制区域上单击和拖动，以交互方式将它们与Connectors连接.
仔细查看一个大的图表，或者通过放大和缩小假设一个更宽的视图. 此外，通过在图中平移，从图的一个区域导航到另一个区域.
< / div > < / div > < div 类="col-lg-4 col-md-4 col-sm-12 col-xs-12 col-content-small">
使用基于数据源数据创建和定位的Nodes和Connectors填充图. 任何格式的数据都可以很容易地转换, 映射, 并通过设置一些属性在图中使用, 无需编写任何代码. JavaScript 图控件还支持从列表或IEnumerable集合中加载数据.
您可以将图表导出为不同的图像文件，如PNG、JPEG、BMP和SVG.
从浏览器打印图表. 您还可以自定义页面大小, 取向, 还有页边距, 把一个图表放在一页纸上.
< / div > < / div > < div 类="col-lg-4 col-md-4 col-sm-12 col-xs-12 col-content-small">
将JavaScript 图的状态保存为JSON格式，稍后再将其加载回来，以便使用序列化器进行进一步编辑.
除了目前列出的所有特性之外, 还有更多可以增强绘图体验的功能.
< / div > < div 类="col-lg-12 col-md-12 col-sm-12 col-xs-12 multi-col-contents"> < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
网格线在尝试对齐对象时提供指导.
< / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
使用页面大小、方向和页边距为绘图表面提供类似页面的外观.
< / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
使用工具提示提供有关Nodes的其他信息.
< / div > < div 类="col-lg-6 col-md-6 col-sm-12 col-xs-12 two-col-content">
轻松地将常用命令映射到上下文菜单.
< / div > < / div > < / div >图组件也可以在Blazor、反应、角和Vue框架中使用. 点击下面的链接查看不同的图平台，
< / div >使用下面演示的几行简单的HTML和TS代码示例轻松地开始使用JavaScript图. 也可以浏览十博体育app的 JavaScript图示例 它向您展示了如何在JavaScript中呈现和配置一个图表.
< div 类="code-snippet-tabs" id="code-snippet-1"> < div 类="tab-content"> < div 类="tab-pane" data-original-lang="html" id="e7pmfu2yzkuedl78gowhqew0hcffomib-html" role="tabpanel"> < div 类="highlight"> 类=“控制部分”>
类=“content-wrapper”>
id=“元素”>
进口 { 图 } 从 '@syncfusion / ej2-图s'; 让 图: 图 = 新 图({ 宽度: '100%', 高度: '600px' }); 图.appendTo('#元素');< / div > < / div > < / div > < / div > < / div >
你可以找到十博体育app的JavaScript图表演示 在这里.
< / div > < / div > < / div > < / div > < div 类="col-lg-6 col-md-6 col-xs-12 col-sm-12"> < div 类="faq-list" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question">不，这是一个商业产品，需要付费许可. 然而,一个 免费社区许可证 也适用于年总收入低于100万美元、开发人员少于5人的公司和个人.
< / div > < / div > < / div > < div 类="faq-list" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question">一个好的起点是十博体育app的综合 入门文档.
< / div > < / div > < / div > < / div > < / div > < / div > < / div > < div 类="common-reviews" id="g2-widget"> < div 类="container"> < div 类="row">
< / div >
< div 类="heading"> 大型ERP应用程序的伟大组件< / div >
< div 类="description">
大量具有有意义的扩展和特性的组件. 十博体育app特别使用编辑控件, 网格分组网格, xlsio, Docio和图表控件，但到目前为止一切都很稳定. 支持是有礼貌的响应，经常提供查询的代码示例.
< / div >
< div 类="g2-author-section">
< div 类="customer-profile name">
Sardan N, < div 类="designation">带领开发人员< / div >
< / div >
< / div >
< / div >
< / div >
< div 类="carousel-cell">
< div 类="cards carousel-section g2-reviews-高度">
< div 类="doubleqoutes">
< / div >
< div 类="heading"> 它比竞争对手拥有更多的工具和支持< / div >
< div 类="description">
Syncfusion必不可少的工作室样本确实很有帮助. 对接管理器，图表，撤销-重做，映射，主题
< / div >
< div 类="g2-author-section">
< div 类="customer-profile name">
哈尔İT, < div 类="designation">软件开发人员< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div 类="g2-widget-review">
< div 类="container">
< div 类="review-section">
< div 类="row">
< div 类="Capterra-logo col-xs-8 star-rating"> < / div >
< div 类="app-ratings col-xs-4">4.4/5< / div >
< / div >
< div 类="reviews-count">(350 +评论)< / div >
阅读更多关于Capterra的内容
< / div >
< / div >
< div 类="sign-up-sections col-sm-4 col-xs-12">
< div 类="app-logos-section">
< div 类="row">
< div 类="G2-logo col-xs-8 star-rating"> < / div >
< div 类="app-ratings col-xs-4">4.6/5< / div >
< / div >
< div 类="reviews-count">(390 +评论)< / div >
阅读更多关于G2的信息
< / div >
< / div >
< div 类="sign-up-sections col-sm-4 col-xs-12">
< div 类="app-logos-section">
< div 类="row">
< div 类="GetApp-logo col-xs-8 star-rating"> < / div >
< div 类="app-ratings col-xs-4">4.4/5< / div >
< / div >
< div 类="reviews-count">(350 +评论)< / div >
阅读更多关于GetApp的信息
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div 类="content-center bg-lazy" id="download-free-trial">
< div 类="container">
< div 类="row">
< div 类="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-content">
文档
< / div >
< / div >
< div 类="col-lg-2 col-sm-4 col-md-4 col-xs-12 category-columns">
技术支持
< div 类="support-link-section">
联络支持
< / div >
< div 类="support-link-section">
社区论坛
< / div >
< div 类="support-link-section">
特性 & 错误
< / div >
< / div >
< div 类="col-lg-2 col-sm-4 col-md-4 col-xs-12 category-columns">
UI工具包
< div 类="support-link-section">
素描下载
< / div >
< div 类="support-link-section">
Adobe XD下载
< / div >
< div 类="support-link-section">
Figma下载
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div 类="segment" id="awards">
< div 类="container segment">
< div 类="row">
伟大——说你拥有它是一回事，但当别人认可它时，它的意义更大. Syncfusion很荣幸地荣获以下行业奖项.
< div 类="all-awards text-center hidden-xs">
< div 类="segment" id="footer-warpper">
< div 类="container">
< div 类="col-lg-offset-1 col-lg-2 col-md-3 col-sm-8 col-xs-12 hidden-xs content-list">
< div 类="top-content content-medium">产品< / div >
< / div >
< div 类="col-lg-offset-1 col-lg-2 col-md-3 col-sm-8 col-xs-12 hidden-xs content-list">
< div 类="top-content content-medium">探索十博体育app的产品< / div >
< / div >
< div 类="col-lg-offset-1 col-lg-2 col-md-3 col-sm-8 col-xs-12 hidden-xs content-list alternatives">
< div 类="top-content content-medium">为什么十博体育app脱颖而出< / div >
< / div >
< div 类="col-lg-offset-1 col-lg-2 col-md-3 col-sm-8 col-xs-12 hidden-xs content-list">
< div 类="top-content content-medium">学习 & 支持< / div >
< / div >
< div 类="col-lg-offset-1 col-lg-2 col-md-3 col-sm-8 col-xs-12 hidden-xs content-list company">
< div 类="top-content content-medium">公司< / div >
< / div >
< / div >
< / div >
< div id="footer-底">
< div 类="container">
< div 类="row">
< div 类="col-sm-8 hidden-xs content-small">
< div 类="footer-syncfusion-logo">
< / div >
< div 类="link policystyle">
隐私政策 |
饼干的政策 |
使用条款 |
安全策略 |
负责信息披露 |
道德政策
< / div >
< div id="复制正确的-desktop 复制正确的-link">
版权所有©Syncfusion, Inc .. 版权所有
< / div >
< / div >
< div 类="col-sm-4 hidden-xs footer-contact-section">
< div 类="footer-contact-fax">
您使用的是过时版本的Internet Explorer，可能无法显示本网站和其他网站的所有功能. 升级到Internet Explorer 8或更新版本以获得更好的体验.
< / div >