CN105824910A - 基于html5的数据可视化系统及方法 - Google Patents

Abstract

本发明公开了一种基于HTML5的数据可视化系统，该可视化系统包括：数据推送上报模块，用于对指定类型的数据进行统计，并提供数据的上报功能，将统计的数据上报给收集发布模块；收集发布模块，用于对数据推送模块上报的数据进行数据模型转换，并将转换后的数据发送给数据更新推送模块；数据更新推送模块，用于将收集发布模块发送的转换后的数据翻译为内部图形展示指令，并将该内部图形展示指令推送给展示模块；展示模块，用于在接收到内部图形展示指令之后，根据该内部图形展示指令执行绘图及展示，以实现数据可视化。本发明还公开了一种基于HTML5的数据可视化方法，使得能够基于HTML5实现数据可视化。

Description

基于HTML5的数据可视化系统及方法

技术领域

本发明涉及数据可视化领域，尤其涉及基于HTML5的数据可视化系统及方法。

背景技术

随着计算机的日益普及，互联网的蓬勃发展，使得计算机使用者能够通过访问各种网站中的网页来获取所需要的讯息，且网站中的各个网页通常是网站编辑者通过超文本标记语言(HyperTextMark-upLanguage，HTML)涉及出来的。

目前，HTML是互联网应用最广泛的扩展标记语言，也是构成网页文档的主要语言。HTML5是HTML的最新版本，相比于HTML之前的版本，HTML5提供了更为合理的标签Tag，及提供了本地数据库支持，该功能将内嵌一个本地SQL数据库，以加速交互式搜索，缓存以及索引功能。

然而，并未有一种有效的基于HTML5的数据可视化的方案。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

本发明的主要目的在于提供一种基于HTML5的数据可视化系统及方法，旨在解决目前没有有效的基于HTML5的数据可视化方案的技术问题。

为实现上述目的，本发明提供的一种基于HTML5的数据可视化系统，包括：

数据推送上报模块，用于对指定类型的数据进行统计，并提供数据的上报功能，将统计的数据上报给收集发布模块；

所述收集发布模块，用于对所述数据推送模块上报的数据进行数据模型转换，并将转换后的数据发送给数据更新推送模块；

所述数据更新推送模块，用于将所述收集发布模块发送的转换后的数据翻译为内部图形展示指令，并将该内部图形展示指令推送给展示模块；

所述展示模块，用于在接收到所述内部图形展示指令之后，根据该内部图形展示指令执行绘图及展示，以实现数据可视化。

优选地，所述收集发布模块还用于将所述转换后的数据保存在SQL数据库中。

优选地，所述收集发布模块具体用于将所述数据推送上报模块上报的数据的类型转换为关系数据模型，并将转换得到的关系数据模型发送给数据推送模块。

优选地，所述可视化系统还包括：

分析处理模块，用于基于web服务，同时使用HTML5标准的WebSocket服务器，处理静态超文本传输协议HTTP请求，并根据基于所述HTTP请求获取的数据生成静态展示图，将所述静态展示图发送给所述展示模块；

所述展示模块还用于展示所述静态展示图。

此外，为实现上述目的，本发明还提供一种基于HTML5的数据可视化方法，包括：

若检测到数据查询请求，则获取所述数据查询请求中的数据指标及分析机制；

根据所述数据指标从指定数据源中获取匹配的数据，并按照所述分析机制对所述匹配的数据进行分析，得到分析数据，通过调用数据推送接口将所述分析数据推送给前端浏览器，使得所述前端浏览器通过多种图形展示方式展示所述分析数据，以实现数据的可视化。

优选地，所述方法还包括：

在所述前端浏览器展示所述数据的过程中，若检测到所述数据发生变化，则通过所述数据推送接口向所述前端浏览器发送变化后的数据，以实现动态图形展示。

本发明提供数据可视化系统，该可视化系统包括：数据推送上报模块，用于对指定类型的数据进行统计，并提供数据的上报功能，将统计的数据上报给收集发布模块；收集发布模块，用于对数据推送模块上报的数据进行数据模型转换，并将转换后的数据发送给数据更新推送模块；数据更新推送模块，用于将收集发布模块发送的转换后的数据翻译为内部图形展示指令，并将该内部图形展示指令推送给展示模块；展示模块，用于在接收到内部图形展示指令之后，根据该内部图形展示指令执行绘图及展示，以实现数据可视化，使得能够基于HTML5实现数据可视化。

附图说明

图1为本发明第一实施例中基于HTML5的数据可视化系统的功能模块示意图；

图2为本发明第二实施例中基于HTML5的数据可视化方法的流程示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

由于现有技术中，没有一种有效的基于HTML5的数据可视化的方案。

为此，本发明实施例中提出一种基于HTML5的数据可视化系统及方法，以使得能够基于HTML5实现数据可视化。

请参阅图1，为本发明第一实施例中基于HTML5的数据可视化系统的结构，包括：数据推送上报模块101、收集发布模块102、数据更新推送模块103及展示模块104；

其中，数据推送上报模块101与收集发布模块102连接，收集发布模块102与数据更新推送模块103连接，数据更新推送模块103与展示模块104连接。

其中，数据推送上报模块101，用于对指定类型的数据进行统计，并提供数据的上报功能，将统计的数据上报给收集发布模块；

在本发明实施例中，数据推送上报模块103可提供数据上报功能，在从数据库中获取统计数据之后，将所有统计数据抽象成基本点-值对，例如(P，V)，其中，P表示数据类型，如在线数据、充值数据、用户动作行为数据等等，V表示该数据类型对应的具体的值。且基于统计数据的改变，该基本点-值对也将实时进行更新。例如：以统计当前在线用户数目为例，每当有新用户上线时，调用report_inc(online)函数，此时P就是在线基本数值，上报动作为V值加1，同理，有用户下线时，调用report_dec(online)函数，此时P即为在线基本数值，上报动作为V值减1。且每次在调用report_inc(online)函数或report_dec(online)函数之后，将统计的数据携带在原数据修改指令中上报给收集发布模块102，以触发收集发布模块102进一步进行处理。

在本发明实施例中，数据推送上报模块101在上报数据时，将基于上报的数据确定对应的数据上报接口，其中，该可视化系统中包含接口实现库，该接口实现库中定义了上述的数据上报接口，且基于该数据上报接口，在该可视化系统的底层使用了一种分布式通信节点技术，使得能够将数据上报给收集发布模块102。

收集发布模块102，用于对数据推送模块101上报的数据进行数据模型转换，并将转换后的数据发送给数据更新推送模块；

在本发明实施例中，收集发布模块102在接收到数据推送模块101上报的数据后，将该上报的数据进行数据模型转换，并将转换后的数据发送给数据更新推送模块103。

具体的，该收集发布模块102将将数据推送上报模块上报的数据的类型转换为关系数据模型，并将转换得到的关系数据模型发送给数据更新推送模块103。

其中，关系数据模型是一种通用数据模式，如在线人数的简单模式(time，value)，其中，time表示时间点，value表示在线人数，因此，在每次有value的值增加或减少时，数据推送上报模块101都将上报给收集发布模块102，使得能够将该数据推送给所有的订阅者，用于实时动态更新数据。

在本发明实施例中，收集发布模块102还用于将转换后的数据保存在SQL数据库中，以实现数据的持久化保存。

数据更新推送模块103，用于将收集发布模块102发送的转换后的数据翻译为内部图形展示指令，并将该内部图形展示指令推送给展示模块104；

在本发明实施例中，数据更新推送模块103在接收到收集发布模块102发送的转换后的数据后，将该转换后的数据翻译为内部图形展示指令，该内部图形展示指令中包含基于转换后的数据得到的待展示的数据及展示图形类型。

其中，展示的图形类型包括折线图、直方图及饼图等中的至少一种。

展示模块104，用于在接收到内部图形展示指令之后，根据该内部图形展示指令执行绘图及展示，以实现数据可视化。

在本发明实施例中，展示模块104用于在接收到内部图形展示指令之后，根据该内部图形展示指令执行绘图及展示，以实现数据可视化。

在本发明实施例中，展示模块104通常是指浏览器的显示模块，且对于每一个已经订阅指定类型的订阅者，在其订阅的数据发生变化时，数据更新推送模块103都将该数据转换后的数据推送给所有订阅者所使用的浏览器，以实现数据的可视化，及动态数据的持续更新。

其中，浏览器是指基于HTML5的浏览器。

通过上述模块，对于用户在订阅的指定数据流，每次在该数据流出现变化时，都可以实现数据流的动态实时更新。

进一步的，在第一实施例中，该可视化系统还可包括：

分析处理模块105，用于基于web服务，同时使用HTML5标准的WebSocket服务器，处理静态超文本传输协议HTTP请求，并根据基于HTTP请求获取的数据生成静态展示图，将静态展示图发送给展示模块104；

展示模块104还用于展示静态展示图。

在本发明实施例中，上述可视化系统能够基于HTML5有效实现动态数据及静态数据的可视化展示。

请参阅图2、为本发明第二实施例中基于HTML5的数据可视化方法的流程示意图，该可视化方法包括：

步骤201、若检测到数据查询请求，则获取数据查询请求中的数据指标及分析机制；

步骤202、根据数据指标从指定数据源中获取匹配的数据，并按照分析机制对匹配的数据进行分析，得到分析数据，通过调用数据推送接口将分析数据推送给前端浏览器，使得前端浏览器通过多种图形展示方式展示分析数据，以实现数据的可视化。

在本发明实施例中，数据查询请求可以是用户在界面设置查询的数据模式，具体可以是在图1所示第一实施例中的展示模块104中进行设置，且用户还可以在展示模块104上进行输入，即用户可以输入想要的数据指标及预分析机制，其中，分析机制是系统提供的多种分析机制中的至少一种。

在本发明实施例中，根据上述数据指标从指定数据源中获取匹配的数据，并按照上述的分析机制对匹配的数据进行分析，得到分析数据，并通过调用数据推送接口将分析数据发送给前端浏览器，使得前端浏览器能够通过多种图形展示方式展示分析数据，以实现数据的可视化。

其中，图形展示方式包括折线图、直方图或饼图等等。

在本发明实施例中，数据源为具体业务使用方，比如游戏应用服务器。

进一步的，在本发明实施例中，在执行上述步骤202之后，还可继续执行以下步骤：

在前端浏览器展示数据的过程中，若检测到数据发生变化，则通过数据推送接口向前端浏览器发送变化后的数据，以实现动态图形展示。

在本发明实施例中，提出的上述可视化方法可应用于游戏运营数据的可视化，只需要游戏业务设计好需要展示的数据模式，并调用数据推送接口推送数据。当有订阅者查询时，可以实现实时观察数据。

在本发明实施例中，通过上述的方法可实现从后端指定数据源获取数据并展示到前端浏览器的数据交互过程，通过调用数据推送接口推送数据，配置实时推送服务后，可以通过前端浏览器以多种图形方式展示数据，以实现数据的可视化。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (6)

1.一种基于HTML5的数据可视化系统，其特征在于，包括：

数据推送上报模块，用于对指定类型的数据进行统计，并提供数据的上报功能，将统计的数据上报给收集发布模块；

所述收集发布模块，用于对所述数据推送模块上报的数据进行数据模型转换，并将转换后的数据发送给数据更新推送模块；

所述数据更新推送模块，用于将所述收集发布模块发送的转换后的数据翻译为内部图形展示指令，并将该内部图形展示指令推送给展示模块；

所述展示模块，用于在接收到所述内部图形展示指令之后，根据该内部图形展示指令执行绘图及展示，以实现数据可视化。

2.根据权利要求1所述的可视化系统，其特征在于，所述收集发布模块还用于将所述转换后的数据保存在SQL数据库中。

3.根据权利要求1所述的可视化系统，其特征在于，所述收集发布模块具体用于将所述数据推送上报模块上报的数据的类型转换为关系数据模型，并将转换得到的关系数据模型发送给数据推送模块。

4.根据权利要求1至3任意一项所述的可视化系统，其特征在于，所述可视化系统还包括：

分析处理模块，用于基于web服务，同时使用HTML5标准的WebSocket服务器，处理静态超文本传输协议HTTP请求，并根据基于所述HTTP请求获取的数据生成静态展示图，将所述静态展示图发送给所述展示模块；

所述展示模块还用于展示所述静态展示图。

5.一种基于HTML5的数据可视化方法，其特征在于，包括：

若检测到数据查询请求，则获取所述数据查询请求中的数据指标及分析机制；

根据所述数据指标从指定数据源中获取匹配的数据，并按照所述分析机制对所述匹配的数据进行分析，得到分析数据，通过调用数据推送接口将所述分析数据推送给前端浏览器，使得所述前端浏览器通过多种图形展示方式展示所述分析数据，以实现数据的可视化。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

在所述前端浏览器展示所述数据的过程中，若检测到所述数据发生变化，则通过所述数据推送接口向所述前端浏览器发送变化后的数据，以实现动态图形展示。