CN109815288A - 一种数据可视化方法及系统 - Google Patents

Abstract

本发明公开了一种数据可视化方法及系统。先创建画布，再获取展示数据信息，再将各种部件在画布上排列，并不断监听新的展示数据信息，实现画布信息的动态调整，从而得到可动态变化的可视化画面，实现了对信息进行形象生动的展示。

Description

一种数据可视化方法及系统

技术领域

本发明涉及互联网技术领域，尤其涉及一种数据可视化方法及系统。

背景技术

随着互联网的不断发展，网民数量不断增加，在经历了十多年的迅速发展后，互联网用户数量正逐渐趋于饱和状态。互联网人口红利带来的机会与优势正在逐步减少，整个互联网行业都在尝试从产品质量以及服务上来获取新的用户与流量。在提升产品质量与服务的过程中，用户的体验感受以及用户的行为数据是十分重要的依据。十亿级别数量的网民在使用互联网的过程中产生的数据是一个无价的宝矿。一方面对于企业而言，企业通过用户数据，可以了解用户的喜好以及用户的行为特征，从而使得企业可以更专业地为用户提供私有化的定制服务，对用户行为的了解，为自身工作的开展指明了方向。对于用户而言，可以通过数据来更专业更真实地了解自己。

随着数据信息越来越重要，如何对信息进行形象生动的展示，也成为了大家追求的目标。由于复杂的展示场景和多变的场景需求，原有的普通报表系统已经无法满足日益增长的展示需求。

发明内容

本发明通过提供一种数据可视化方法及系统，解决了现有技术中无法适应复杂的展示场景和多变的场景需求的技术问题，实现了对信息进行形象生动的展示的技术效果。

本发明提供了一种数据可视化方法，包括：

创建画布；

获取展示数据信息；

将所述展示数据信息加载到所述画布中，形成可视化画面；

监听新的展示数据信息，并根据所述新的展示数据信息对所述可视化画面进行更新。

进一步地，所述创建画布，包括：

获取表单信息；

为所述表单信息生成标识码；

根据所述表单信息和所述标识码在一个共享空间创建一个标签；

根据所述表单信息获得所述标签的样式信息；

根据所述样式信息创建画布。

进一步地，在为所述表单信息生成标识码之前，还包括：

对所述表单信息进行验证；

当所述表单信息的内容符合数据格式时，为所述表单信息生成标识码。

进一步地，在所述根据所述样式信息创建画布时，还包括：

创建用于储存所述画布中部件的数组和用于储存当前部件的当前对象。

进一步地，所述将所述展示数据信息加载到所述画布中，形成可视化画面，包括：

接收拖拽请求及其位置信息和所述展示数据信息；

记录所述拖拽请求及其位置信息；

当所述拖拽请求消失时，记录当前位置信息；

将所述当前位置信息和所述展示数据信息添加到所述数组中，并清空当前对象中的数据；

遍历所述数组，将所述数组中的所有部件进行渲染，生成至所述画布上，形成所述可视化画面。

本发明还提供了一种数据可视化系统，包括：

画布创建模块，用于创建画布；

信息获取模块，用于获取展示数据信息；

画面生成模块，用于将所述展示数据信息加载到所述画布中，形成可视化画面；

监听模块，用于监听新的展示数据信息，并根据所述新的展示数据信息对所述可视化画面进行更新。

进一步地，所述画布创建模块，包括：

表单信息获取单元，用于获取表单信息；

标识码生成单元，用于为所述表单信息生成标识码；

标签生成单元，用于根据所述表单信息和所述标识码在一个共享空间创建一个标签；

样式信息获取单元，用于根据所述表单信息获得所述标签的样式信息；

画布创建单元，用于根据所述样式信息创建画布。

进一步地，所述画布创建模块，还包括：

表单信息验证单元，用于对所述表单信息进行验证；

所述标识码生成单元，具体用于当所述表单信息验证单元的验证结果为所述表单信息的内容符合数据格式时，为所述表单信息生成标识码。

进一步地，所述画布创建模块，还包括：

数据库创建单元，用于创建用于储存所述画布中部件的数组和用于储存当前部件的当前对象。

进一步地，所述画面生成模块，包括：

拖拽请求接收单元，用于接收拖拽请求及其位置信息和所述展示数据信息；

记录单元，用于记录所述拖拽请求及其位置信息；

位置信息确认单元，用于当所述拖拽请求消失时，记录当前位置信息；

数据添加单元，用于将所述当前位置信息和所述展示数据信息添加到所述数组中，并清空当前对象中的数据；

渲染单元，用于遍历所述数组，将所述数组中的所有部件进行渲染，生成至所述画布上，形成所述可视化画面。

本发明中提供的一个或多个技术方案，至少具有如下技术效果或优点：

先创建画布，再获取展示数据信息，再将各种部件在画布上排列，并不断监听新的展示数据信息，实现画布信息的动态调整，从而得到可动态变化的可视化画面，实现了对信息进行形象生动的展示。

附图说明

图1为本发明实施例提供的数据可视化方法的流程图；

图2为基于本发明实施例提供的数据可视化方法创建画布的流程图；

图3为基于本发明实施例提供的数据可视化方法形成可视化画面的流程图；

图4为本发明实施例提供的数据可视化方法中对生成的可视化画面进行动态修改的流程图；

图5为本发明实施例提供的数据可视化方法中进行数据保存和页面预览的流程图；

图6为本发明实施例提供的数据可视化系统的模块图。

具体实施方式

本发明实施例通过提供一种数据可视化方法及系统，解决了现有技术中无法适应复杂的展示场景和多变的场景需求的技术问题，实现了对信息进行形象生动的展示的技术效果。

本发明实施例中的技术方案为解决上述问题，总体思路如下：

先创建画布，再获取展示数据信息，再将各种部件在画布上排列，并不断监听新的展示数据信息，实现画布信息的动态调整，从而得到可动态变化的可视化画面，实现了对信息进行形象生动的展示。

为了更好地理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。

参见图1，本发明实施例提供的数据可视化方法，包括：

步骤S110：创建画布；

对本步骤进行具体说明，步骤S110包括：

获取表单信息；在本实施例中，表单信息至少包括：名称、长度、宽度、背景颜色、背景图片。

为表单信息生成标识码；

根据表单信息和标识码在一个共享空间创建一个标签；

根据表单信息获得标签的样式信息；在本实施例中，样式信息至少包括：标题、宽度、高度、背景图片。

根据样式信息创建画布。

对本发明实施例提供的数据可视化方法进行具体说明，在为表单信息生成标识码之前，还包括：

对表单信息进行验证；

当表单信息的内容符合数据格式时，通过验证，为表单信息生成标识码。

当表单信息的内容不符合数据格式时，未通过验证，返回错误信息。

对本发明实施例提供的数据可视化方法进行进一步说明，在根据样式信息创建画布时，还包括：

创建用于储存画布中部件的数组和用于储存当前部件的当前对象。

步骤S120：获取展示数据信息；在本实施例中，展示数据信息至少包括：类型、尺寸、位置、是否锁定比例、当前状态、文本框中的文本、表格中的表格内容。

步骤S130：将展示数据信息加载到画布中，形成可视化画面；

对本步骤进行具体说明，步骤S130包括：

接收拖拽请求及其位置信息和展示数据信息；

记录拖拽请求及其位置信息；

当拖拽请求消失时，记录当前位置信息；

将当前位置信息和展示数据信息添加到数组中，并清空当前对象中的数据；

遍历数组，将数组中的所有部件进行渲染，生成至画布上，形成可视化画面。

步骤S140：监听新的展示数据信息，并根据新的展示数据信息对可视化画面进行更新。

在本实施例中，可视化画面的更新过程与可视化画面的生成过程相同，这里不做赘述。

需要说明的是，本发明实施例还可以将共享空间中的对象数组以及画布对象保存至创建的对应标识码的可视化应用在数据库中对应的数据表中，从而实现对可视化应用数据的保存。

在收到预览请求时，通过调用数据库中对应的数据，加载生成新的预览页面，从而在页面中进行完整的预览。

参见图2，基于本发明实施例提供的数据可视化方法创建画布的过程为：

当服务器捕获到浏览器传输的新建可视化应用请求后，服务器响应请求并开始进行页面挂载(页面创建)。当页面挂载完成时，服务器响应并弹出一个用于进行基本设置的表单框，表单框中包括名称、长度、宽度、背景颜色、背景图片五条属性，供填写或选择，这五条属性用于可视化应用的基本设置。当服务器监听到表单的提交请求时，会对表单中的内容格式进行验证，当内容符合数据格式时通过验证(如名称为汉字，长宽为正整数，背景颜色为12进制的6位字符串，背景图片为jpg或png格式)，反之则未通过验证。当表单通过验证时，服务器会为当前看板生成一个用于标识的标识码id(id为随机数)，依托上一步骤传输的表单中的数据和当前生成的id，在一个大的共享空间VOEX创建一个当前id的div(标签)来完成可视化应用画布对象的创建，并根据表单中的数据设定div中的style(样式)，包括title(标题)、width(宽)、higth(高)、background(背景，图片默认拉伸)，完成画布的创建。同时会在VOEX中创建一个用于储存画布中部件的数组elementlist以及一个用于储存当前部件的当前对象。这里需要说明的是，可视化应用处于同一个共享空间VOEX时，其中的对象和数组数据共通，可以进行任意的引用；若不处于同一个共享空间VOEX时，数据独立，无法进行引用。

参见图3，基于本发明实施例提供的数据可视化方法形成可视化画面的过程为：

对于所有的div部件，均写入了一个拖拽目标对象事件。当部件监听到拖拽目标事件时(按下并拖拽)，会向服务器发送一个创建当前对象的请求，服务器收到请求后，根据被拖动部件的type值确定部件的类型(根据type值进行标识，1为可视化图表部件，2为表格部件，3为边框部件，4为文本框部件，5为图片部件)，并在VOEX中完成当前对象的创建，该对象包括一个父元素(用于设定部件基本属性，包括尺寸、位置、是否锁定比例、当前状态(默认为false，false为无法编辑))以及嵌入一个子元素(用于设置部件的特殊属性，如文本框中的文本、表格中的表格内容)。当前只完成对象的创建，即只有对象的部分数据信息，而未完成创建。

画布会对释放目标对象(松开鼠标)事件进行监听，首先会进行判断，只有当鼠标位置处于画布之中时，才会触发事件。当判断鼠标位置处于画布之中后，画布会根据距离当前鼠标相对于画布左上角计算出当前鼠标对应的坐标，并将该坐标值赋予给当前对象中的位置。

部件会对拖拽结束事件进行监听，当监听到鼠标松开时，会将当前对象添加至创建的elementlist数组中，并清空当前对象中的数据。添加完成后，画布对象遍历elementlist数组，并通过if语句判断其type值对应的部件类型，并将数组中的所有部件进行渲染，生成至画布上，形成可视化画面。

需要说明的是，参见图4，部件会对鼠标点击进行监听，从而对生成的可视化画面进行动态修改，即动态更新。具体为，当监听到鼠标单击后，会标记当前部件选中状态为true(可编辑)，根据当前部件类型及数据，服务器弹出当前部件的数据表，可用于对属性进行修改，同时将其他对象选中状态标记为false(不可编辑)。当监听到鼠标双击后，会标记当前部件选中状态为true(可编辑)，可编辑部件中的具体内容，同时将其他对象选中状态标记为false(不可编辑)。当部件被标记时，会将部件对应的数据赋予当前对象。

此外，画布会对鼠标位置进行监听。当鼠标处于已标记部件四条边的中心以及四个角时，服务器响应，对应光标更改为resize光标(改变尺寸)；当鼠标处于部件中的其他位置时，服务器响应，对应光标更改为move光标(改变位置)。

当光标类型为resize时，监听到鼠标按下并拖动目标对象时，会根据移动的坐标差值，对部件的相应边进行相应移动，实现尺寸的修改。当处于四个角时，会根据移动的横纵坐标差值比例，固定对应角，进行部件尺寸的等比例缩放。当光标类型为move时，监听到鼠标按下并拖动目标对象时，会根据移动的坐标差值，将部件以中心进行坐标差值长度的移动。

当画布监听到目标对象拖动结束事件时，画布将部件的尺寸、位置赋予当前对象，画布对象遍历elementlist数组，并通过if语句寻找部件对应的index值，并修改elementlist[index]值，并将数组中的所有部件进行渲染，生成至画布上。

参见图5，当服务器收到保存请求时，会将VOEX中的对象数组以及画布对象保存至创建的对应id的可视化应用在数据库中对应的数据表中，从而实现对可视化应用数据的保存。

当服务器收到预览请求时，首先会进行可视化应用的保存，然后调用数据库中对应的数据，加载生成新的预览页面，从而在页面中进行完整的预览。

需要说明的是，当服务器监听到修改画布的请求后，会自动捕获表单(可视化应用基本设置栏)中的数据，并根据最新的数据，修改div中的相应样式，即完成对画布基本属性的修改。

参见图6，本发明实施例提供的数据可视化系统，包括：

画布创建模块100，用于创建画布；

在本实施例中，画布创建模块100，包括：

表单信息获取单元，用于获取表单信息；在本实施例中，表单信息至少包括：名称、长度、宽度、背景颜色、背景图片。

标识码生成单元，用于为表单信息生成标识码；

标签生成单元，用于根据表单信息和标识码在一个共享空间创建一个标签；

样式信息获取单元，用于根据表单信息获得标签的样式信息；在本实施例中，样式信息至少包括：标题、宽度、高度、背景图片。

画布创建单元，用于根据样式信息创建画布。

在本实施例中，画布创建模块100，还包括：

表单信息验证单元，用于对表单信息进行验证；

在这种情况下，标识码生成单元，具体用于当表单信息验证单元的验证结果为表单信息的内容符合数据格式时，通过验证，为表单信息生成标识码。

错误信息返回单元，用于当表单信息验证单元的验证结果为表单信息的内容不符合数据格式时，未通过验证，返回错误信息。

进一步地，画布创建模块100，还包括：

数据库创建单元，用于创建用于储存画布中部件的数组和用于储存当前部件的当前对象。

信息获取模块200，用于获取展示数据信息；在本实施例中，展示数据信息至少包括：类型、尺寸、位置、是否锁定比例、当前状态、文本框中的文本、表格中的表格内容。

画面生成模块300，用于将展示数据信息加载到画布中，形成可视化画面；

在本实施例中，画面生成模块300，包括：

拖拽请求接收单元，用于接收拖拽请求及其位置信息和展示数据信息；

记录单元，用于记录拖拽请求及其位置信息；

位置信息确认单元，用于当拖拽请求消失时，记录当前位置信息；

数据添加单元，用于将当前位置信息和展示数据信息添加到数组中，并清空当前对象中的数据；

渲染单元，用于遍历数组，将数组中的所有部件进行渲染，生成至画布上，形成可视化画面。

监听模块400，用于监听新的展示数据信息，并根据新的展示数据信息对可视化画面进行更新。

在本实施例中，可视化画面的更新过程与可视化画面的生成过程相同，这里不做赘述。

需要说明的是，本发明实施例还包括：

数据保存模块，用于将共享空间中的对象数组以及画布对象保存至创建的对应标识码的可视化应用在数据库中对应的数据表中，从而实现对可视化应用数据的保存。

预览模块，用于在收到预览请求时，通过调用数据库中对应的数据，加载生成新的预览页面，从而在页面中进行完整的预览。

本发明实施例构建了一种定制化的可视化体系，其目的是为了实现根据展示场景及需求进行可视化应用的定制。通过对本发明实施例的应用，技术人员先将图表源数据导入系统中，根据数据生成对应的数据图表。接着，技术人员根据需求、场景创建可视化应用，并根据显示终端的尺寸设置画布尺寸以及画布背景。再将所需的可视化应用组件(如文本框、导航栏、边框、图片等)拖入画布中，并设置相应组件的内容，完成各组件的排列，从而完成可视化应用的制作。最后，保存预览可视化应用，查看具体的展示情况。本发明实施例将可视化应用模块独立出来，完成一个单独的可视化配置系统web版的开发，供使用者进行可视化应用的配置，用户只需进行拖拽和排列，即可完成可视化应用的制作，极大地降低了整体的使用难度。本发明实施例在可视化应用制作过程以及部件创建中，使用多种自定义指令，针对不同的场景展示需求，可以自由地定义展示图表以及展示内容，设计出特定的符合需求的可视化应用。此外，通过利用VOEX公共空间，实现了可视化应用中部件以及画布的数据连通。利用对象数组，将所有部件的数据信息储存在一起，提高了管理和运行效率。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种数据可视化方法，其特征在于，包括：

创建画布；

获取展示数据信息；

将所述展示数据信息加载到所述画布中，形成可视化画面；

监听新的展示数据信息，并根据所述新的展示数据信息对所述可视化画面进行更新。

2.如权利要求1所述的方法，其特征在于，所述创建画布，包括：

获取表单信息；

为所述表单信息生成标识码；

根据所述表单信息和所述标识码在一个共享空间创建一个标签；

根据所述表单信息获得所述标签的样式信息；

根据所述样式信息创建画布。

3.如权利要求2所述的方法，其特征在于，在为所述表单信息生成标识码之前，还包括：

对所述表单信息进行验证；

当所述表单信息的内容符合数据格式时，为所述表单信息生成标识码。

4.如权利要求2所述的方法，其特征在于，在所述根据所述样式信息创建画布时，还包括：

创建用于储存所述画布中部件的数组和用于储存当前部件的当前对象。

5.如权利要求4所述的方法，其特征在于，所述将所述展示数据信息加载到所述画布中，形成可视化画面，包括：

接收拖拽请求及其位置信息和所述展示数据信息；

记录所述拖拽请求及其位置信息；

当所述拖拽请求消失时，记录当前位置信息；

将所述当前位置信息和所述展示数据信息添加到所述数组中，并清空当前对象中的数据；

遍历所述数组，将所述数组中的所有部件进行渲染，生成至所述画布上，形成所述可视化画面。

6.一种数据可视化系统，其特征在于，包括：

画布创建模块，用于创建画布；

信息获取模块，用于获取展示数据信息；

画面生成模块，用于将所述展示数据信息加载到所述画布中，形成可视化画面；

监听模块，用于监听新的展示数据信息，并根据所述新的展示数据信息对所述可视化画面进行更新。

7.如权利要求6所述的系统，其特征在于，所述画布创建模块，包括：

表单信息获取单元，用于获取表单信息；

标识码生成单元，用于为所述表单信息生成标识码；

标签生成单元，用于根据所述表单信息和所述标识码在一个共享空间创建一个标签；

样式信息获取单元，用于根据所述表单信息获得所述标签的样式信息；

画布创建单元，用于根据所述样式信息创建画布。

8.如权利要求7所述的系统，其特征在于，所述画布创建模块，还包括：

表单信息验证单元，用于对所述表单信息进行验证；

所述标识码生成单元，具体用于当所述表单信息验证单元的验证结果为所述表单信息的内容符合数据格式时，为所述表单信息生成标识码。

9.如权利要求7所述的系统，其特征在于，所述画布创建模块，还包括：

数据库创建单元，用于创建用于储存所述画布中部件的数组和用于储存当前部件的当前对象。

10.如权利要求9所述的系统，其特征在于，所述画面生成模块，包括：

拖拽请求接收单元，用于接收拖拽请求及其位置信息和所述展示数据信息；

记录单元，用于记录所述拖拽请求及其位置信息；

位置信息确认单元，用于当所述拖拽请求消失时，记录当前位置信息；

数据添加单元，用于将所述当前位置信息和所述展示数据信息添加到所述数组中，并清空当前对象中的数据；

渲染单元，用于遍历所述数组，将所述数组中的所有部件进行渲染，生成至所述画布上，形成所述可视化画面。