[发明专利]一种基于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为本发明中添加鱼刺的流程图。

具体实施方式