CN107608676A - 一种基于gojs技术的交互式图表的实现方法 - Google Patents

Abstract

本发明涉及数据处理领域，其公开了一种基于gojs技术的交互式图表的实现方法，方便实现用户与数据图表之间的交互，展现更加直观。该方法，包括:利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表，为用户提供交互功能，所述交互功能包括：拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

Description

一种基于gojs技术的交互式图表的实现方法

技术领域

本发明涉及数据处理领域，具体涉及一种基于gojs技术的交互式图表的实现方法。

背景技术

图表泛指在屏幕中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地"可视化"的手段。

合理的数据图表，会更直观的反映数据间的关系，比用数据和文字描述更清晰、更易懂。将工作表中的数据转换成图表呈现，可以关注我们更好地了解数据见的比例关系及变化趋势，对研究对象做出合理的推断和预测。然而现有技术中的数据图表一般都是只能进行属性数据的展示，不能实现与用户间的互动。

发明内容

本发明所要解决的技术问题是：提出一种基于gojs技术的交互式图表的实现方法，方便实现用户与数据图表之间的交互，展现更加直观。

本发明解决上述技术问题采用的技术方案是：

一种基于GoJs技术的交互式图表的实现方法，包括:

利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表，为用户提供交互功能，所述交互功能包括：拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

作为进一步优化，所述GoJs以图形对象表示绘图单元，JSON对象作为数据模型，图形对象通过属性绑定的方式从数据模型获取相关的属性值。

作为进一步优化，所述利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表具体包括：

创建图形对象，构建数据模型，设置图形对象属性，绑定数据模型，添加交互行为。

作为进一步优化，在创建图形对象时，通过$调用gojs自身的属性和方法，完成节点和连线的绘制。

作为进一步优化，所述绑定数据模型是指将图形对象的属性与对应数据模型的属性进行绑定。

作为进一步优化，所述添加交互行为是指为节点添加鼠标事件，实现鼠标事件与节点属性的绑定。

本发明的有益效果是：便于用户在网络浏览器和平台上实现自定义交互式图表，通过可自定义的模板和布局构建，用户可以为图表节点添加任何需要的属性，从而增加了图表的交互性。

具体实施方式

本发明旨在提出一种基于gojs技术的交互式图表的实现方法，方便实现用户与数据图表之间的交互，展现更加直观。

本发明利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表，为用户提供交互功能，所述交互功能包括：拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

GoJS属于功能丰富的JS库，在Web浏览器和平台上可实现自定义交互图和复杂的可视化效果，GoJS用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表。

无需切换服务器和插件，GoJS就能实现用户互动并在浏览器中完全运行，呈现HTML5 Canvas元素或SVG，也不用服务器端请求。GoJS不依赖于任何JS库或框架，可与任何HTML或JS框架配合工作，甚至可以不用框架。

用功能强大的GoJS可以构建自定义建模环境和特定的可视化语言，使用共享代码和模板提供一个系统编辑器和只读状态监控，在不同的图表中显示相同数据的可视化替代，实现子图或其它图表的详细视图扩展。

在具体实现上，利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表具体包括：创建图形对象，构建数据模型，设置图形对象属性，绑定数据模型，添加交互行为。

其中，创建图形对象时，可以把$理解成一个画笔，而myDiagram理解成画布，画图时，通过$调用gojs自身的属性和方法，完成节点和连线的绘制，attrs为图形对象属性。而为了把链接加入图中，基础的模型是不够用的。因此，需要加入GoJS中的两个其它的模型，他们是GraphLinksModel和TreeModel。接着，我们需要设置图形对象的属性，然后将图形对象的属性与对应数据模型的属性进行绑定，最后为节点添加鼠标事件，实现鼠标事件与节点属性的绑定。

Claims (6)

1.一种基于GoJs技术的交互式图表的实现方法，其特征在于，包括:

利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表，为用户提供交互功能，所述交互功能包括：拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

2.如权利要求1所述的一种基于GoJs技术的交互式图表的实现方法，其特征在于，所述GoJs以图形对象表示绘图单元，JSON对象作为数据模型，图形对象通过属性绑定的方式从数据模型获取相关的属性值。

3.如权利要求1所述的一种基于GoJs技术的交互式图表的实现方法，其特征在于，所述利用GoJs通过自定义的模板和布局组件构建简化节点、链接和分组后的JS图表具体包括：

创建图形对象，构建数据模型，设置图形对象属性，绑定数据模型，添加交互行为。

4.如权利要求3所述的一种基于GoJs技术的交互式图表的实现方法，其特征在于，在创建图形对象时，通过$调用gojs自身的属性和方法，完成节点和连线的绘制。

5.如权利要求3所述的一种基于GoJs技术的交互式图表的实现方法，其特征在于，所述绑定数据模型是指将图形对象的属性与对应数据模型的属性进行绑定。

6.如权利要求3所述的一种基于GoJs技术的交互式图表的实现方法，其特征在于，所述添加交互行为是指为节点添加鼠标事件，实现鼠标事件与节点属性的绑定。