创建简单可视化的JavaScript交互式图表框图

dhtmlxDiagram是一个图库,只需几行代码就能生成任何你需要的图。借助自动布局和实时图编辑器,以整齐的层次结构可视化复杂数据。JavaScript dh6 Y 5tmlxDi= 1 Dagram允许您向Web应用程序中添加漂亮的交互式图表,图表v w 3和图形。借助这种0 7 T F轻巧而快速的组件,您的数据将以清晰直观的方式表示。

慧都网点击下载dhtmlxDiagram试用版

寻找合适的工 - b A 4 G Q具来可视化系统和概念时,请不要忘记JavaS# . r S % , Bcript框图提供的简单有效的决策。这种图表类型有助于快速说明相关系统或主题的主要; ( U部分。您可以下载带有此图类型和其他图类型的图表库,以进行30天试用。


框图通常用于在工作初期对系统,过程或概念进行( D A R K }简要描述。它们广泛应用于工程科学,电子学,计算机等应用? % ( J L c ,科学领域,用于创建@ ( $ # 5 v O A 1项目草稿,系统,程序和软件应用程序的一般说明。为了避免分散对核心元素的注j 7 ) 9意力并提供整个系统的概述,从框图中省略了细节。将来,此类图可能会详细阐述或分为几个图,以帮助进行进一步的设计过程。
此外,您可能会发现依靠JavaScripQ u [ B d { % ^t框图作为草* 7 G C绘想法,项目步骤或f L a Z N l ;某些要点的一种方法很有用。

绘图框图

P f % K ( N D d f图的所有元素在可视化中都起着同等的作用。它们由相似的矩形表示o X w M,通常被视为“黑匣子”。

了解这些元素本z l : * . % & 身与框图的创建过程无关,而更重要的是它们的互连。框图中可能没有层# K N { l r Z U -次结构,并且它们的元素可能以闭合回路组织。

箭头表示从一个块到另一块的数据流,并指示应如何读取该图。为了使其更清楚,可以在形状旁边提供标题以添加简要说明。

使用DHTMLX构建JavaScript框图

JavaScript框图与组织结构图,工作流图,决策树,UML图等图类型一起包含在DHTMLX图表库中。由于具有3 H V C L - ` $ c丰富的API,广泛的浏q Q q ~ V览器支持以及各种简单的实现,所有这些图都可以轻松集成到应用程序中框架和技术。可以- P 6 1 ~ 3 w ) y将数y H 0据以JSON格式加载到js框图(请在此处查o L h - - Q ~看文档)。

定制选项的灵活性使您可以完全按照所需的方式从头开始构J q ] 5 p建框图,并改善其外观和风格,从而满足项目的所有要求。形状和连接器的对象属性的完整列表在此处。我们的CSS样式指南将帮助您确定图表的外观。此外,还有许多不同的操作可让您操纵图的形状-添加新形状,删除旧形状,更新形状的内容,过滤形状以及不进行其他操作。

让我们仔细看看如何通过CSS以及形状和连接器的对象属性配置JavaScript框图:

<stylX ( e Y z Ne>
html,body,.cont{
background[ | O s: #FFF;
}
.dhx_diagram{
background: #FFF;
}
.dhx_free_diagram .dhxF s T_it6 P A c w H T `em_sU l ^ 2hape{
fill: #A4E5D9;
stroke:none;
}
.dhx_free_diagram .d: : 4 v O X . _hx_diagram_flow_item text{
font-size: 16px;
}
.dhx_free_diagram .dhx_item_text{
fontf U A v ) ) & %-siz2 L ? ~ H D % W Ee: 16px;
}
#dhx_text_bacT E  @ ; w W 3kground feFlood{
flood-color: #FFF;
}
.dhx_free_diagram .dhx_item_text{j c [ _ $ F b *
filter:url(#dhx_text_background);
fill:#000;
}
.dhx_free_diagram .dhx_diagram_ln @ # i Qi~ U Q ` m f P s Bne{
stroke: #7FBBB0;
}
.dhx_free_diagram .dhx_diagram_arrow{
stroke:#7FBBB0;
fill:#7FBBB0;
}
.titles .dhx_itt [ 2 - ? X {em_shape{
fill:#FFF;
}
</& R -style>
var dataPlanning = [
{ "id": 1, "x": 200, "y": 0, "text": "Ar# , Arival", "type": "process" },
{ "id": 2, "x": 200, "y": 130, "text": "Load", "type": "process"s o g L s },
{ "id": 2.1, "x": 480, "y": 130, "text+ } n 5": "Part", "type": "process" },
{ "id": 3, "x": 2G ( ; s d w U 00, "y": 260, "text": "Process Plan",K . C @ t z ] ^ & "type": "proD c - 8cess" },
{ "id": 3.1, "x": 0, "y": 240, "text": "Unit Load", "type( : $ r o 3 v": "proce9 9 Y ~ 2 sss" },
...
{ "id": 19, "x": 270, [ ] l b e B"y": 500, "text": "Allocates", "type": "text" },
{ "id": 20, "x": 390, "y": 555, "text": "Works on", "type": "text" },
{ "id": 21, "xW { ] C A n q S *": 270, "y": 630, "th x m * ^ z # z 4ext": "S - 7 j UIs a", "type"A [ E ~ K: "text" },
{ "id": 22, "x": 940, "N ) U ? ly": 790, "text": "Connected throug% o M d + . a uhf f $ ", "type": "text" },
...
{ froD h P 8 u j 6 P Nm: 2, to: 2.W y } v r e -1, type: "line", backArrow:"filled" },
{ from: 2, to: 3.1, type: "line", forwardArrow: "fw 2 & K ?illed" , toSide: "top" },
{ from: 3, to: 4] ! b ~ # s b b j, typeI Q h 4 1 i i a: "line", forwardArrow: "filleg F Y { { F Td"  },
{ from: 4, to: 5, type: "line", forwardArrow: "filled"  },
{ from: 5, to: 5.1, type: "line"5 0 d, forwardArrow: "filled" , toSide: "bottom" },
{ from: 5, to: 5.2, type: "line", forwardArro= O j F v w Jw: "filled" , toSide: "bottom" },
{ from: 5, to: 5.3, type: "line", forwardArrow: "filled" , toSide: "bottom" },
{ from: 5, to: 5.4, type: "line", forwardArrow: "filled" , toSide: "bottom" },
...
{ froO ! S S Q  ) Hm: 5, to: 10, type: "line", forwardArrow: "filled" , fromSide: "bottom", toSide: "top" },
{ from: 5, to: 11, type: "line", forwardArrow: "filled"H , q F W - C 1 : , fromSide: "bottom", toSide: "top" },
{ from: 5, to: 12, type: "line", forwardArrow: "filled" , fromSide: "bottom", toSidb D I A ( Se: "top" },
{ from: 5, to: 13, type: "line", forwardArv w p i T 6 orow: "fillej W @ G A I 3d" , fromSide: "bottom", toSide: "top" },
]

dhtmlxDiagram库不9 O y r K 6 (仅为开发人员,而且由于特殊的图编辑器,也为最终用户提供了量身定制图的空间。它易于初始化,可以用作从头. Q = i m O D q开始创建图表而无需编写代码,自定义其外观,保存更改并即时查看它们的应用程序。
设计完框图后,请通过导出为PDF或PNG] S w & n格式进行保存。

结论

框图在我们的库中加入了各种JavaScript图类型,并为您提供了一种简单而有效的方法的优点,可用于对系统和概念进行快速的常规可视化,创建草稿和草E 2 W图以( : l S p及以清晰紧凑的方式记录想法。

DHTMLX图表库为您提供了O Z 1 c K p w 6一个强大的工具,可用于构建高度可定6 ` q s Q制的JavaScript框图并将其集成到任何项目中。我们的30天试用版可让您测试库的所有功能,并在评估期内为我们的开发团队提供支持。

APSC ` k O ? j q D帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时! g N 2 } r &交货能力,提高产能和资源利用率

想要购买dhtmlxDiagram正版授权,或了解慧都APS系统请点击【咨询在线客服】

本文章转载自【慧都科技】evget欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果