一篇文章告诉你,为什么要使用Javascript流程图来可视化进程?(下)

DHTMLX Diagram库是有各种类型的图组成的,其中最广泛使用的是JavaScript流程图,它可以显示任何类型的的工作流、过程或系统,您可以下载DHTMLX Diagram的评估版并亲自试用。

在上文中(点击这里回顾>>),我们为大家介绍了Javascript流程图的应用场景、流程图如何可视化数据等,本文将继续讲解为何要使用DHTMLX Diagram控件构建Javascript流程图!

DHTMLX Diagram正式版下载

为什么选择DHTMLX Diagram构建Javascript流程图?

能够操作流程图对于工作流可视化很重要,丰富和灵活的API提供了可以实现目标的机会,用户可以使用其设置 javascript/html5 流程图。

1. 设置具有多个配置选项的流程图元素

当您开始使用DHTMLX构建JavaScript流程图时,会欣赏到许多有用的配置选项。此时,您可以指定形状和线条的默认类型、形状之间的边距、带有形状图标的工具栏、工具提示等。

如果您需要在DHTMLX库中提供任何特定的流程图形状类型,只需将其设置为形状对象内的type属性中的值。类似地,使用line对象中的type属性指定单个连接器的线路类型。

若要在为复杂流程图准备数据时节省时间,可以使用defaults属性一次为所有形状和连接器线指定默认配置,这种方法还有助于提高代码的可读性。

2. 自定义和样式每个流程图元素来进行定制满足需求

JavaScript图表库的另一个关键优势是增强了可定制性,用户可以在其对象中对形状和连接器行进行样式设置,并重新定义相应的CSS类。因此根据项目的要求调整主要流程图元素的外观不会成为问题,形状中的文本内容可以通过内联编辑轻松更改。

如果这还不够,还有可能创建自定义流程图形状并为它们定义模板。若要将自己的形状添加到流程图中,应使用addShape方法。

3. 通过API自由操作形状,在需要时进行更改

当涉及到通过组件的API操作图表项时,DHTMLX Diagram的js流程图是高度灵活的。

例如,如果您想要建立一个大的流程图,不需要安排整个结构在一个适当的顺序,有一个特殊的自动布局算法可以帮您更快地完成这项工作。该算法将一组随机连接的形状转换成一个美观的层次结构,形状的正交或径向定位。在自动放置过程中,可以使用对角线(直接模式)或直角(边缘模式)连接线连接形状。

该功能通过两种方式启用:

  • 使用autoplacement属性:
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial"
});
  • 使用autoPlace()方法:
const diagram = new dhx.Diagram(document.body, {
type: "default",
autoplacement: {
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial",
}
});

添加新形状、删除旧形状,甚至通过使用相关的数据收集API从头开始创建图表,都是可能的。

使用add方法,您可以向流程图中添加新形状:

diagram.data.add({id:"3.2", text:"New Item", parent:"3"});

删除一些不需要的形状,甚至所有的形状都可以用remove方法来完成:

diagram.data.remove(3.2);

diagram.data.removeAll();

如果您对已有的形状感到满意,但是它们的内容需要改进,那么可以应用update方法将新数据放入形状中。

diagram.data.update("1", {text:"Some new text"});

4. 制作易于阅读和分析的宽流程图

有了缩放和滚动功能,包含大量数据的宽流程图不再给您和您的最终用户带来麻烦。考虑到流程图的大小,您可以在scale属性的帮助下放大或缩小:

var diagram = new dhx.Diagram (diagram"diagram_container", {type: "org", scale: 0.7});
diagram.data.parse(data);

另一种选择是添加水平和/或垂直卷轴来查看流程图。

为了便于最终用户使用复杂的结构进行工作,您还可以使用swimlanes来补充流程图,它有助于将整个可视化过程划分为独立的阶段,就像本示例中所示。

DHTMLX Diagram流程图形状图

这里还有一个有用的功能,就是能够通过连接线上的标题来澄清流程图中棘手的部分。

5. 导出流程图为PNG和PDF

如果将流程图导出为png或pdf,则可以轻松地保存、存储和与他人共享过程可视化。

pdf或png导出方法不仅允许导出图表,但也调整导出设置:

//export with config settings
diagram.export.png({
type:"jpeg"
fullPage: true
});

6. 提供无缝的前端和后端集成

真正重要的是,我们的javascript流程图可以集成到使用任何客户端和服务器端技术构建的任何web应用程序中,数据很容易以JSON格式加载到图表中。我们提供的演示将让您清楚地了解如何将DHTMLX Diagram集成到基于流行JavaScript框架(Angular, React, Vue.js)的应用程序中。使用DHTMLX Diagram,您的流程图将在任何触屏设备和所有现代浏览器上同样出色地执行。

7. 在DHTMLX Diagram编辑器中构建流程图

作为通用编码方法的另一种选择,您还可以使用图编辑器,它作为我们的图表库的辅助工具,具有三种操作模式(默认,组织图,思维导图)。通过将编辑器嵌入到您的应用程序中,将使最终用户能够以无代码的方式使用30多个内置形状构建流程图和其他类型的图表。它有一个用户友好的界面,支持拖放,由四个主要部分组成:

  • 控制整个编辑过程的工具栏;
  • 左面板选择所需的形状;
  • 用于与形状交互的网格区域;
  • 用于更改图表外观的右面板。

DHTMLX Diagram流程图形状图

在功能方面,编辑器支持图表组件的主要特性,如自动布局算法、自定义形状、泳线、内联编辑等。为了方便地使用自定义形状,您可以自定义编辑器的两个面板。

DHTMLX Diagram流程图形状图

除此之外,编辑器还提供了一些独特的功能。例如,可以选择多个形状并同时执行一些基本操作(拖动、复制、粘贴、删除),为形状设置自定义工具栏,使用特殊的热键组合加速类似形状的样式等。

DHTMLX Diagram流程图形状图

除了自动布局算法之外,最终用户还可以使用对齐线和多个对齐和分布选项在编辑器中准确地组织形状。

DHTMLX Diagram流程图形状图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/87230.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

动态规划之路径问题

路径问题 1. 不同路径(medium)2. 不同路径II(medium)3. 礼物最大值(medium)4. 下降路径最小和(medium)5. 最⼩路径和(medium)6. 地下城游戏(hard&…

7.elasticsearch同步工具-logstah

1.logstah Logstash 是一个用于数据处理和转换的开源工具,它可以将来自不同源头的数据收集、转换、过滤,并将其发送到不同的目标。Logstash 是 ELK(Elasticsearch、Logstash 和 Kibana)技术栈的一部分,通常与 Elastics…

实验篇——Ka/Ks分析

实验篇——Ka/Ks分析 文章目录 前言一、名词解释二、实操1. 安装软件2. 准备文件3. 使用ParaAT2.0 KaKs_Calculator2.04. 使用TBtools软件 三、额外总结 前言 鉴定不同基因的复制模式 本文得到的共线性基因对文件 来自于上一篇文章中的LIN.collinearity共线性文件 参考文章&…

设计模式(3)抽象工厂模式

一、概述: 1、提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们具体的类。 2、结构图: 3、举例代码: (1) 实体: public interface IUser {public void insert(User user);public…

C++--动态规划两个数组的dp问题

1.最长公共子序列 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 给定两个字符串 text1 和 text2,返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 ,返回 0 。 一个字符串的 子序列 是指这样一个新的字符串…

Java 实现 国密SM4/ECB/PKCS7Padding对称加密解密

Java 实现 国密SM4/ECB/PKCS7Padding对称加密解密&#xff0c;为了演示方便本问使用的是IntelliJ IDEA 2022.1 (Community Edition)来构建代码的 1、pom.xml文件添加需要的jar <?xml version"1.0" encoding"UTF-8"?> <project xmlns"htt…

分布式事务(4):两阶段提交协议与三阶段提交区别

1 两阶段提交协议 两阶段提交方案应用非常广泛&#xff0c;几乎所有商业OLTP数据库都支持XA协议。但是两阶段提交方案锁定资源时间长&#xff0c;对性能影响很大&#xff0c;基本不适合解决微服务事务问题。 缺点&#xff1a; 如果协调者宕机&#xff0c;参与者没有协调者指…

SpringBoot 01 如何创建 和pom的解析

目录 1 Springboot的创建 步骤 2 项目的书写和运行 创建service包并在其下写一个service文件 项目的运行 pom文件的一些配置 parent web test 打包 打包过程 1 Springboot的创建 步骤 首先new一个新项目 然后依照如下创建 2 项目的书写和运行 创建service包并…

python接口自动化测试框架2.0,让你像Postman一样编写测试用例,支持多环境切换、多业务依赖、数据库断言等

项目介绍 接口自动化测试项目2.0 软件架构 本框架主要是基于 Python unittest ddt HTMLTestRunner log excel mysql 企业微信通知 Jenkins 实现的接口自动化框架。 前言 公司突然要求你做自动化&#xff0c;但是没有代码基础不知道怎么做&#xff1f;或者有自动化…

nginx基于端口如何配置虚拟主机

在 Nginx 中配置基于端口的虚拟主机&#xff08;也称为服务器块&#xff09;与配置基于域名的虚拟主机类似&#xff0c;但是你需要指定监听的端口。以下是基于端口的虚拟主机配置示例&#xff1a; 假设我们要配置两个不同的虚拟主机&#xff0c;一个监听 8080 端口&#xff0c…

vcomp140.dll丢失的修复方法分享,电脑提示vcomp140.dll丢失修复方法

今天&#xff0c;我的电脑出现了一个奇怪的问题&#xff0c;打开某些程序时总是提示“找不到vcomp140.dll文件”。这个问题让我非常头疼&#xff0c;因为我无法正常使用电脑上的一些重要软件。为了解决这个问题&#xff0c;我在网上查找了很多资料&#xff0c;并尝试了多种方法…

亮点!视频云存储/安防监控视频智能分析平台高空抛物AI智能检测

一、行业现状 近年来&#xff0c;高空抛物不文明事件频频发生&#xff0c;成为小区住宅的管理通病&#xff0c;也给居民的人身及财产安全带来了巨大伤害和损失。高空抛物可能导致人身事故等重大经济损失的严重危害&#xff0c;被称作“悬在城市上空的痛”。 TSINGSEE青犀AI智…

算法练习- 其他算法练习5

文章目录 宜居星球改造计划 宜居星球改造计划 yes no na 每个值为一个格子&#xff1b;每天yes的值可以向上下左右扩展一个格子&#xff0c;将no改为yes&#xff1b;矩形区域no是否可以全部转为yes&#xff0c;可以的话需要几天&#xff1f;不可以的话输出-1输入&#xff1a; …

基于FPGA的FIR低通滤波器实现(附工程源码),matlab+vivado19.2+simulation

基于FPGA的FIR低通滤波器实现(附工程源码) 文章目录 基于FPGA的FIR低通滤波器实现(附工程源码)前言一、matlab设计FIR滤波器&#xff0c;生成正弦波1.设计FIR滤波器1.生成正弦波.coe 二、vivado1.fir滤波器IP核2.正弦波生成IP核3.时钟IP核设置4.顶层文件/测试文件代码 三.simul…

Linux共享库基础及实例

共享库是将库函数打包成一个可执行文件&#xff0c;使得其在运行时可以被多个进程共享。 目标库 回顾下构建程序的一种方式&#xff1a; 将每个源文件编译成目标文件&#xff0c;再通过链接器将这些目标文件链接组成一个可执行程序。 gcc -g -c prog.c mod1.c mod2.c gcc -g …

2023国赛数学建模思路 - 案例:粒子群算法

文章目录 1 什么是粒子群算法&#xff1f;2 举个例子3 还是一个例子算法流程算法实现建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是粒子群算法&#xff1f; 粒子群算法&#xff08;Pa…

C/C++:C/C++在大数据时代的应用,以及C/C++程序员未来的发展路线

目录 1.C/C在大数据时代的应用 1.1&#xff1a;C/C数据处理 1.2&#xff1a;C/C数据库 1.3&#xff1a;C/C图像处理和计算机视觉 1.3.1&#xff1a;导读 2.C/C程序员未来的发展路线 2.1&#xff1a;图导 1.C/C在大数据时代的应用 C/C在大数据时代中仍然是一种被广泛应用的编…

如何使用Wireshark进行网络流量分析?

如何使用Wireshark进行网络流量分析。Wireshark是一款强大的网络协议分析工具&#xff0c;可以帮助我们深入了解网络通信和数据流动。 1. 什么是Wireshark&#xff1f; Wireshark是一个开源的网络协议分析工具&#xff0c;它可以捕获并分析网络数据包&#xff0c;帮助用户深入…

Python(八十五)格式化字符串

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

MySQL 主从配置

环境 centos6.7 虚拟机两台 主&#xff1a;192.168.23.160 从&#xff1a;192.168.23.163 准备 在两台机器上分别安装mysql5.6.23&#xff0c;安装完成后利用临时密码登录mysql数据修改root的密码&#xff1b;将my.cnf配置文件放至/etc/my.cnf&#xff0c;重启mysql服务进…
最新文章