CN105589909A - 数据可视化实现系统及方法 - Google Patents

Abstract

本发明提供数据可视化实现系统，包括设置在服务器端的图表创建模块，设置在客户端的渲染模块。图表创建模块包括模板库；加载单元，用于在图表创建模块接收到图表制作请求时，自模板库中加载相关的模板，制作请求包括指示采用哪一个模板的模板型号指示信息以及要填充到所采用的模板中的数据源信息；转换单元，用于将所加载的模板转换为图表对象；填充单元，用于依据数据源信息获取数据以填充所转换的图表对象；传送单元，其将所生成的初级图表传送向客户端。渲染模块，其设置在客户端，所述渲染模块在接收到来自传送单元的初级图表之后，即按照针对当前所采用的模板的预设参数来对该初级图表进行渲染。还提供相应的数据可视化实现方法。

Description

数据可视化实现系统及方法

技术领域

本发明涉及数据处理，更为具体地，涉及数据可视化实现技术。

背景技术

随着网络技术和数据库技术的成熟以及数据应用的普及，积累的数据量正在以指数级速度增长。面对日益庞大的数据，人们已不满足于仅仅对数据进行管理，而希望能对数据进行分析，从大量的数据中发现知识或信息。为此业界涌现出多种数据可视化工具，例如Jfreechart、Highcharts、Echarts等，以便在如实呈现数据的同时使用户能以不同的方式解读同样的数据，能聚焦在其所关心的地方。但这些工具的类及接口较多，复杂度较高，需花大量时间研究。例如Jfreechart作为最流行的Java后端图表制作工具，输出的图表交互性较差；Highcharts和Echarts是知名度最高的JS图表库，具有生动的图表展现能力，但需要较为深厚的JavaScript编程能力，调试和排错工作量大。

发明内容

有鉴于此，本发明提供一种更为简便易用的数据可视化工具。根据本发明的数据可视化实现系统，包括：图表创建模块，其设置在服务器端；以及渲染模块，其设置在客户端。所述图表创建模块包括模板库，其包括多个模板；加载单元，其用于在图表创建模块接收到图表制作请求时，自所述模板库中加载相关的模板，所述制作请求包括指示采用哪一个模板的模板型号指示信息以及要填充到所采用的模板中的数据源信息；转换单元，其用于将所加载的模板转换为图表对象；填充单元，其用于依据所述数据源信息获取数据以填充所转换的图表对象，由此生成初级图表；传送单元，其将所生成的初级图表传送向客户端。所述渲染模块，其设置在客户端，所述渲染模块在接收到来自传送单元的初级图表之后，即按照针对当前所采用的模板的预设参数来对该初级图表进行渲染。

根据本发明所述的数据可视化实现系统，可选地，所述预设参数配置在所述图表创建模块中且包括多组，所述一个模板对应至少一组预设参数，所述预设参数用于指示如何渲染该相应的模板。根据本发明所述的数据可视化实现系统，可选地，所述模板库中的模板是XML格式或JSON格式。根据本发明所述的数据可视化实现系统，可选地，所述图表创建模块还包括字符流转换单元，用于将所述初级图表转换为字符流。

本发明还提供数据可视化实现方法，其应用在包括服务器端与客户端的系统中，所述方法包括：

在所述服务器端：

创建多个模板从而形成模板库；

在接收到图表制作请求时，自所述模板库中加载相关的模板，所述制作请求包括指示采用哪一个模板的模板型号指示信息以及将要填充到所采用的模板中的数据源信息；

将所加载的模板转换为图表对象；

依据所述数据源信息获取数据以填充所转换的图表对象，由此生成初级图表；

将所生成的初级图表传送给客户端；

在所述客户端：

在接收到来自传送单元的初级图表之后，即按照针对当前所采用的模板的预设参数来对该初级图表进行渲染

根据本发明所述的数据可视化实现方法，可选地，所述预设参数配置在所述服务器端中且包括多组，所述一个模板对应至少一组预设参数，所述预设参数用于指示如何渲染该相应的模板。根据本发明所述的数据可视化实现方法，可选地，，所述模板库中的模板是XML格式或JSON格式。根据本发明所述的数据可视化实现方法，可选地，在所述服务器端，在向所述客户端传递所述初级图表之前，将其转换为字符流。

采用如本发明所述的方法或系统，可通过较为简化的操作实现丰富的渲染。

附图说明

图1是根据本发明示例的数据可视化实现系统的机构示意图。

图2是渲染模块的一个示例性显示。

图3是根据图2实现的曲线图的效果图。

图4是根据本发明的一个示例的数据可视化实现方法的流程图。

具体实施方式

现在参照附图描述本发明的示意性示例，相同的附图标号表示相同的元件。下文描述的各实施例有助于本领域技术人员透彻理解本发明，且意在示例而非限制。除非另有限定，文中使用的术语（包括科学、技术和行业术语）具有与本发明所属领域的技术人员普遍理解的含义相同的含义。

图1是根据本发明示例的数据可视化实现系统的机构示意图。如图所示，在服务器端1上设置有图表创建模块10，在客户端2上设置有渲染模块20。服务器端1也可称为后端，而客户端2也可称为前端。图表创建模块10包括模板库100，加载单元102，转换单元104，填充单元106，以及传送单元108。

模板库100包括多个模板。模板包括多个，在实际应用中，每个模板都有相对应的模板目录。在具体实现中，可引入自定义的jar文件，在模板目录添加相应的模板，同时修改与模板相关的配置参数。模板例如包括柱状图、折现图、散点圆、K线图、饼图、地图等。

根据本发明的一个示例，图表创建模块中还包括多组预设参数，一个模板至少对应一组预设参数，预设参数用于指示如何渲染该相应的模板，比如模板的各处用什么颜色渲染、模板的哪一处处理为动态等。

加载单元102用于在图表创建模块接收到图表制作请求时，自模板库100中加载相关的模板。该制作请求包括指示采用哪一个模板的模板型号指示信息以及要填充到所采用的模板中的数据源信息。由此，加载单元102可通过模板型号指示信息自模板库100中选择所需要的模板。

转换单元104，其用于加载单元102所加载的模板转换为图表对象。填充单元106则根据数据源信息撷取要填充到模板中的数据，并将该数据填充到图表对象的相应位置，由此生成初级图表。传送单元108将生成的初级图表传送给客户端2。根据本发明的示例，数据源信息表明了要载入模板的数据的存储位置；可替代地，数据源信息本身也可以是要载入模板的数据。

根据本发明的示例，模板库100中的各模板或是XML格式或是JSON格式，但不以此为限制，在实际应用中，可设置更多格式的模板。根据本发明的示例，设置在服务器处的图表创建模块可采用Jackson技术来实现，通过定义统一接口来将模板转换成Java图表对象，也可以将Java图表对象转换为模板。如此通过实现模板与图表对象之间的映射关系，可以让用户以面向对象的方式对图表模板进行数据拼接与调试。根据本发明的示例，图表创建模块10还包括字符流转换单元110，其在初级图表传输给客户端之前，将该初级图表转换为字符流，传送单元108则将该字符流传送给客户端2。

设置在客户端2处的渲染模块20在接收到来自传送单元108传送的初级图表之后，按照针对当前所采用的模板的预设参数来对该初级图表进行渲染。针对当前所采用的模板的预设参数在图表创建模块10中搭载在模板上最终作为初级图表数据的一部分，一起传输给客户端2的。渲染模块20包括渲染引擎与用于启动该渲染引擎的接口，通过该接口可开启对初级图表的渲染工作，由此简化了客户端工程师（业界称呼为前端工程师）的开发，使得对js、jquery使用不熟悉的用户可轻松制作各种丰富的图表。作为示例，图表绘制引擎采用HTML5Canvas实现，其基本原理是定义一个矩形区域及类似于dom对象的属性、方法和事件（包括绘制路径、矩形、圆形、字符等），通过js在矩形区域里进行各种图形图表绘制，从而形成数据可视化图表库（如柱状图、折线图、散点图、K线图、饼图、地图等）。用于启动该渲染引擎的接口，也可称呼为标签，则采用dom、js、jquery实现，由dom、jquery负责创建与解析标签对象，根据标签可以自定义图表大小、宽度、高度、图表类型与Form参数等，封装成统一的标签接口以便调用。根据本发明示例的设置在前端、即客户端处的渲染模块20，其优势在于开发人员不需要关心组件内部逻辑，只需在前端页面中加入图表渲染引擎，通过标签启动渲染，就可以展现出丰富、以及根据需要而兼具动态的图表，而无需额外的前端开发。示例如图2所示。图3是根据图2实现的曲线图的效果图。

图4是根据本发明的一个示例的数据可视化实现方法的流程图，该方法应用在包括服务器端与客户端的系统中。根据该方法，在服务器端实现步骤40到步骤48，在客户端处实现步骤50。

在步骤40，创建多个模板从而形成模板库。模板包括多个，在实际应用中，每个模板都有相对应的模板目录。在具体实现中，可引入自定义的jar文件，在模板目录添加相应的模板，同时修改与模板相关的配置参数。模板例如包括柱状图、折现图、散点圆、K线图、饼图、地图等。根据本发明的一个示例，图表创建模块中还包括多组预设参数，一个模板至少对应一组预设参数，预设参数用于指示如何渲染该相应的模板，比如模板的各处用什么颜色渲染、模板的哪一处处理为动态等。

在步骤42，在接收到图表制作请求时，自所述模板库中加载相关的模板，所述制作请求包括指示采用哪一个模板的模板型号指示信息以及将要填充到所采用的模板中的数据源信息。该制作请求包括指示采用哪一个模板的模板型号指示信息以及要填充到所采用的模板中的数据源信息。

在步骤44，将所加载的模板转换为图表对象。

在步骤46，依据所述数据源信息获取数据以填充所转换的图表对象，由此生成初级图表。

在步骤48，将所生成的初级图表传送给客户端。

根据本发明的示例，模板库中的各模板或是XML格式或是JSON格式，但不以此为限制，在实际应用中，可设置更多格式的模板。根据本发明的示例，在服务器端可采用Jackson技术来实现模板的创建，通过定义统一接口来将模板转换成Java图表对象，也可以将Java图表对象转换为模板。如此通过实现模板与图表对象之间的映射关系，可以让用户以面向对象的方式对图表模板进行数据评接与调试。根据本发明的示例，还将初级图表在传输给客户端之前，转换为字符流，并将所转换的字符流传送给客户端2。

在客户端执行步骤50，在步骤50，接收到来自服务器端传送的初级图表之后，按照针对当前所采用的模板的预设参数来对该初级图表进行渲染。针对当前所采用的模板的预设参数可设置在服务器端，并搭载在模板上最终作为初级图表数据的一部分，一起传输给客户端。渲染的具体实现可采用设置在客户端的渲染模块来实现，其过程上文已结合图1描述，不再赘述。渲染之后的图表将通过客户端呈现给用户。

根据本发明所述的数据可视化实现系统可实现为软件，分别设置在服务器端与客户端。根据本发明所述的数据可视化实现方法可应用在该可视化实现系统中，但也可应用在其它系统。

本申请中提供的解决方案，对用户或者说使用者而言，在渲染时只需操作用于启动渲染的接口，即标签即可，不需要关心整个系统的内部逻辑。这让只懂后端技术的开发人员也能制作出生动丰富的图表，做到了通过一行代码实现各种各样图表的展示，极大地缩短了开发时间，降低了开发成本。同时该方法实现了视图与数据分离，便于开发人员进行调试和排错，具有更好的可维护性。

Claims (9)

1.一种数据可视化实现系统，其特征在于，所述系统包括：

图表创建模块，其设置在服务器端，所述图表创建模块包括：

模板库，其包括多个模板；

加载单元，其用于在图表创建模块接收到图表制作请求时，自所述模板库中加载相关的模板，所述制作请求包括指示采用哪一个模板的模板型号指示信息以及要填充到所采用的模板中的数据源信息；

转换单元，其用于将所加载的模板转换为图表对象；

填充单元，其用于依据所述数据源信息获取数据以填充所转换的图表对象，由此生成初级图表；

传送单元，其将所生成的初级图表传送向客户端；

渲染模块，其设置在客户端，所述渲染模块在接收到来自传送单元的初级图表之后，即按照针对当前所采用的模板的预设参数来对该初级图表进行渲染。

2.如权利要求1所述的数据可视化实现系统，其特征在于，所述预设参数配置在所述图表创建模块中且包括多组，所述一个模板对应至少一组预设参数，所述预设参数用于指示如何渲染该相应的模板。

3.如权利要求1或2所述的数据可视化实现系统，其特征在于，所述模板库中的模板是XML格式或JSON格式。

4.如权利要求3所述的数据可视化实现系统，其特征在于，所述图表创建模块还包括字符流转换单元，用于将所述初级图表转换为字符流。

5.如权利要求4所述的数据可视化实现系统，其特征在于，所述传送单元将所述字符流传送向所述客户端。

6.一种数据可视化实现方法，其应用在包括服务器端与客户端的系统中，其特征在于，所述方法包括：

在所述服务器端：

创建多个模板从而形成模板库；

在接收到图表制作请求时，自所述模板库中加载相关的模板，所述制作请求包括指示采用哪一个模板的模板型号指示信息以及将要填充到所采用的模板中的数据源信息；

将所加载的模板转换为图表对象；

依据所述数据源信息获取数据以填充所转换的图表对象，由此生成初级图表；

将所生成的初级图表传送给客户端；

在所述客户端：

在接收到来自传送单元的初级图表之后，即按照针对当前所采用的模板的预设参数来对该初级图表进行渲染。

7.如权利要求6所述的数据可视化实现方法，其特征在于，所述预设参数配置在所述服务器端中且包括多组，所述一个模板对应至少一组预设参数，所述预设参数用于指示如何渲染该相应的模板。

8.如权利要求6或7所述的数据可视化实现方法，其特征在于，所述模板库中的模板是XML格式或JSON格式。

9.如权利要求8所述的数据可视化实现系统，其特征在于，在所述服务器端，在向所述客户端传递所述初级图表之前，将其转换为字符流。