一种基于WEB浏览器的鱼骨图在线编辑方法技术

本发明专利技术提供一种基于WEB浏览器的鱼骨图在线编辑方法，包括如下步骤：步骤1、将鱼骨图的各个节点保存至数据库，浏览器加载web应用程序，通过后台服务器提取所述节点，在浏览器上生成原始鱼骨图；步骤2、若要删除该选中鱼刺，则直接删除即可；若要添加鱼刺：若添加鱼刺为一级鱼刺，则所述一级鱼刺距离鱼头或鱼尾的距离至少为100像素；若添加鱼刺为二级鱼刺，则所述二级鱼刺距离主骨的具体至少为70像素；若添加鱼刺为三级鱼刺，则所述三级鱼刺距离一级鱼刺的距离至少为100像素；步骤3、在各级鱼刺上添加文本框，并插入文字，完成所需鱼骨图的编辑；便于用户在WEB浏览器直接编辑鱼骨图。

【技术实现步骤摘要】

本专利技术涉及一种基于WEB浏览器的鱼骨图在线编辑方法。
技术介绍
在事件发生的诸多原因中，只要首先解决其中20％的主要原因，其余80％的原因也会随之解决，那么整个事件的问题也就解决了，这就是管理工具-“鱼骨图”。“鱼骨图”又称“特性要因图”，就是将造成某项结果的众多原因，以系统的方式图解之。也就是以图表的方式来表达结果与原因的关系，因其图形像鱼骨，故称之为“鱼骨图”。鱼骨图的基本形状，如图1所示：说明：1代表特性，表示需要解决的问题；2代表鱼骨图的主骨；6代表因素，3所在的分支代表鱼骨图的大骨(即一级鱼刺)；4代表鱼骨图的中骨(即二级鱼刺)，5代表鱼骨图的小骨(即三级鱼刺)，中骨是影响大骨的主要因素，小骨是影响中骨的主要因素，以此类推。在鱼骨图编制方面，传统的绘图软件如Word、Visio等，通过线、箭头、文本框等形状绘制出鱼头、主骨、因素、大骨、中骨、小骨以及鱼尾等，并通过排序和对齐选中形状生成所需要的鱼骨图。然而，尽管在绘图软件中可以根据需求生成任何形状的鱼骨图，但在WEB浏览器环境下，这些绘图软件无法使用。可以说，在浏览器环境下只能以图片的方式浏览上述工具生成的鱼骨图，无法实时根据动态需求进行编辑，包括拉动和增删改鱼骨、鱼刺及编辑因素等。也就是说，当调整鱼骨、鱼刺及因素时，只能在绘图软件重新生成一次鱼骨图后再导入到浏览器上，这使得操作非常繁琐。此外，由于各个操作者的使用习惯和熟练度不同，利用绘图软件制作的鱼骨图没有统一的标准，并花费操作者过多的时间。因此，必须开发具有在线编辑功能的鱼骨图控件。
技术实现思路
本专利技术要解决的技术问题，在于提供一种基于WEB浏览器的鱼骨图在线编辑方法。本专利技术是这样实现的：一种基于WEB浏览器的鱼骨图在线编辑方法，包括如下步骤：步骤1、将鱼骨图的各个节点属性数据保存至数据库，浏览器加载web应用程序，通过后台服务器提取所述节点属性数据，在浏览器上生成原始鱼骨图；步骤2、若要删除该选中鱼刺，则直接删除即可；若要添加鱼刺：若添加鱼刺为一级鱼刺，则所述一级鱼刺距离鱼头或鱼尾的距离至少为100像素；若添加鱼刺为二级鱼刺，则所述二级鱼刺距离主骨的距离至少为70像素；若添加鱼刺为三级鱼刺，则所述三级鱼刺距离一级鱼刺的距离至少为100像素；步骤3、在各级鱼刺上添加文本框，并插入文字，完成所需鱼骨图的编辑。进一步地，所述步骤1中，当前端要生成某种鱼骨图时，将鱼骨图的各个节点属性数据保存至数据库，后台服务器通过访问数据库，提取出所有的保存节点属性数据；所述节点包括父节点、本节点以及子节点，后台服务器会将所述节点以JSON数组的形式传给前端，使前端通过节点属性数据在浏览器上生成原始鱼骨图。进一步地，所述二级鱼刺的宽度至少为70像素。进一步地，还包括步骤4、将编辑完成的鱼骨图的节点坐标保存XML文件中。本专利技术具有如下优点：1、鱼骨图在线编辑控件不需要安装和依赖于第三方插件，控件由JavaScript脚本组成，能够在所有主要浏览器，包括IE、Firefox、Chrome等运行，不需要在浏览器上安装任何插件和设置安全权限。2、控件可实现对鱼骨图进行在线编辑，可根据需要直接在浏览器上对图上的数据、位置和内容等信息进行修改。3、利用控件生成的鱼骨图风格比较统一，控件提供统一的模板，操作者在添加、删除、拉动鱼头、鱼尾、鱼骨、鱼刺以及编辑因素文字时，能保持鱼骨的整体形状不变形，鱼骨与鱼刺的连接关系不会被打乱。4、利用控件生成的鱼骨图较美观，鱼刺上文字的样式可进行单个选中修改也可全部统一地进行修改，即文字字体的类型和大小可单一修改亦可统一修改，这让整个版面为美观而进行的文字样式调整变得更方便也更加人性化。5、鱼骨图能随时保存和恢复，该鱼骨图在保存后下次打开时，显示的是最后一次保存的结果而非原始生成的数据，用户新建鱼骨图也可以参考上次保存的鱼骨图并在上面修改，令工作效率有了显著的提升。附图说明下面参照附图结合实施例对本专利技术作进一步的说明。图1为本专利技术鱼骨图的结构示意图。图2为本专利技术总体系统架构图。图3为本专利技术中拉动鱼刺的流程图。图4为本专利技术中添加鱼刺的流程图。具体实施方式本专利技术基于WEB浏览器的鱼骨图在线编辑方法，鱼骨图在线编辑控件由JavaScript脚本组成，能够在所有主要浏览器，包括IE、Firefox、Chrome等运行，不需要在浏览器上安装任何插件和设置安全权限。总体系统架构图如图2，设计思路如下：1、当浏览器加载控件时，后台先调取服务器数据库中的信息，如果没有保存，则根据模板生成标准鱼骨图，否则将保存数据以JSON串传到浏览器进行绘制之前保存过的鱼骨图。2、控件是一个具有交互式绘图功能的web应用程序，绘制的每个形状包括一个或多个div元素，控件使用了基本的矢量图形语言，矢量图形语言相当于画笔，能实现想要的图形，而且结合JavaScript脚本，可以让图形产生动态的效果。此外，矢量的图形可以任意拖动、编辑、放大缩小而不损失图形的质量。3、在线编辑鱼骨图时，可根据需要直接在浏览器上对图上的数据、位置和内容等信息进行修改，并能保持鱼骨的整体形状不变形，鱼刺与鱼骨的连接关系不会被打乱。此外，鱼骨图鱼刺上文字的样式可单选也可多选进行修改，这让整个版面为美观而进行的文字样式调整变得更方便也更加的人性化。而且，在鱼刺的操作上，鱼骨图可根据使用者的需求和版面美观的需要进行鱼刺对称于上级鱼刺的水平或垂直翻转，当鱼刺进行翻转时其所有子鱼刺也会跟着进行翻转。4、鱼骨图编辑完毕后，控件将每个形状的父节点、子节点、横坐标、纵坐标等参数保存到XML文件中，并回传到服务器上，保存该鱼骨图在保存后下次打开时，显示的是最后一次保存的结果而非原始生成的数据。六、具体实现的技术方案，请描述具体步骤并配合图说明：1、初始化鱼骨图步骤如下：当前端要生成某种鱼骨图时，后台服务器通过访问数据库，提取出所有的保存节点数据。所有节点分成三个层次，分别是父节点、本节点、子节点。后台服务器会将每个节点和各自的父、子节点以JSON数组的形式传给web前端，使web前端通过各父、子节点关系得鱼骨图的树形结构从而生成出该鱼骨图。2、选择鱼骨和鱼刺的步骤如下：首先，判断当前这根鱼刺是否为已选中的鱼刺，若不是，则判断该鱼刺是否有子鱼刺，本文档来自技高网...

【技术保护点】
一种基于WEB浏览器的鱼骨图在线编辑方法，其特征在于：包括如下步骤：步骤1、将鱼骨图的各个节点属性数据保存至数据库，浏览器加载web应用程序，通过后台服务器提取所述节点属性数据，在浏览器上生成原始鱼骨图；步骤2、若要删除该选中鱼刺，则直接删除即可；若要添加鱼刺：若添加鱼刺为一级鱼刺，则所述一级鱼刺距离鱼头或鱼尾的距离至少为100像素；若添加鱼刺为二级鱼刺，则所述二级鱼刺距离主骨的距离至少为70像素；若添加鱼刺为三级鱼刺，则所述三级鱼刺距离一级鱼刺的距离至少为100像素；步骤3、在各级鱼刺上添加文本框，并插入文字，完成所需鱼骨图的编辑。

【技术特征摘要】
1.一种基于WEB浏览器的鱼骨图在线编辑方法，其特征在于：包括
如下步骤：
步骤1、将鱼骨图的各个节点属性数据保存至数据库，浏览器加载web
应用程序，通过后台服务器提取所述节点属性数据，在浏览器上生成原始鱼
骨图；
步骤2、若要删除该选中鱼刺，则直接删除即可；
若要添加鱼刺：
若添加鱼刺为一级鱼刺，则所述一级鱼刺距离鱼头或鱼尾的距离至少为
100像素；
若添加鱼刺为二级鱼刺，则所述二级鱼刺距离主骨的距离至少为70像
素；
若添加鱼刺为三级鱼刺，则所述三级鱼刺距离一级鱼刺的距离至少为
100像素；
步骤3、在各级鱼刺上添加文本框，并插入文字，完成所需鱼骨图的编
辑。
2.根据权利...

【专利技术属性】
技术研发人员：叶守强，范元飞，倪超，邱聿燕，郭志兴，秦晓春，
申请(专利权)人：福建亿同世纪软件科技股份有限公司，
类型：发明
国别省市：福建;35