CN115080042A - 一种基于内嵌式数据模板的自定义页面布局方法及系统 - Google Patents

Abstract

本发明涉及大数据可视化技术领域，公开了一种基于内嵌式数据模板的自定义页面布局方法及系统，所述系统包括：图表模板管理模块，用于对各类图表模板进行管理；数据源处理模块，用于获取数据源并进行解析，映射到各类图表所需的数据结构；图表生成模块，用于接收针对图表的选择及配置，生成一个或多个图表模型；页面布局模块，用于对已生成图表模型进行页面布局及布局调整。本发明无需针对具体业务需求进行开发，获取数据源后即可自动解析并映射至各类图表所需的数据结构，用户可针对图表类型和布局进行任意选择和调整，灵活性强。

Description

一种基于内嵌式数据模板的自定义页面布局方法及系统

技术领域

本发明属于大数据可视化技术领域，尤其涉及一种基于内嵌式数据模板的自定义页面布局方法及系统。

背景技术

本部分的陈述仅仅是提供了与本发明相关的背景技术信息，不必然构成在先技术。

为了便于海量和差异化数据的分析和呈现，通常以图表简单易读的形式将数据进行展示，因此目前涌现了大量基于大数据分析的数据展示化工具，这些工具平台通过客户的需求，针对性的对大量数据进行组合分析，然后用数据面板或者数据大屏的形式反馈给用户，为用户的决策或战略方向提供数据方面的参考建议。

目前由于在智慧大屏中需要展示的信息以及指标越来越丰富，不同用户不同场景下的不同使用需求都会导致不一样的数据分析模板，使得如果大面积为不同客户提供解决方案的话，那就需要分别不同场景去定制化不同的数据分析页面，这样开发周期长并且复用性差开发成本高，并且完全不能百分比的分别去满足对象的数据分析要求。

发明内容

为克服上述现有技术的不足，本发明提供了一种基于内嵌式数据模板的自定义页面布局方法及系统，无需针对具体业务需求进行开发，获取数据源后即可自动解析并映射至各类图表所需的数据结构，用户可针对图表类型和布局进行任意选择和调整，灵活性强。

为实现上述目的，本发明的一个或多个实施例提供了如下技术方案：

一种基于内嵌式数据模板的自定义页面布局系统，包括：

图表模板管理模块，用于对各类图表模板进行管理；

数据源处理模块，用于获取数据源并进行解析，映射到各类图表所需的数据结构；

图表生成模块，用于接收针对图表的选择及配置，生成一个或多个图表模型；

页面布局模块，用于对已生成图表模型进行页面布局及布局调整。

进一步地，所述系统还包括指标库管理模块，用于对各类业务相应的业务指标进行管理；以及知识库管理模块，用于对各类图表相应的数据结构进行管理。

进一步地，所述数据源处理模块被配置为执行：

获取数据源，并提取所述数据源中的字段信息；

将所述字段信息与指标库中的业务指标进行匹配；

根据匹配成功的业务指标，基于知识库中各图表的数据结构，以及业务指标与维度的对应关系，生成各图表所需数据结构的数据表。

进一步地，所述系统还包括页面初始布局模块，用于对页面的初始网格布局进行配置，包括配置页面中初始网格的数量和大小。

进一步地，所述布局调整包括以下一种或多种：

接收鼠标对图表模板的拖拽，将所述图表模板移动至对应网格；

接收鼠标对图表模板的缩放，并根据缩放后所述图表模板的大小匹配至相应大小的网格；

接收针对图表模板图表类型的重新指定，获取新图表类型所需数据结构的数据表并生成新的图表模板；以及

接收对图表样式的修改。

进一步地，预先存储各类图表模板，包括以下步骤：

获取数据源并进行解析，映射到各类图表所需的数据结构；

接收针对图表的选择及配置，生成一个或多个图表模型；

对已生成图表模型进行页面布局及布局调整。

进一步地，预先配置指标库和知识库，所述指标库用于对各类业务相应的业务指标进行管理；所述知识库，用于对各类图表相应的数据结构进行管理。

进一步地，所述映射到各类图表所需的数据结构包括：

获取数据源，并提取所述数据源中的字段信息；

将所述字段信息与指标库中的业务指标进行匹配；

根据匹配成功的业务指标，基于知识库中各图表的数据结构，以及业务指标与维度的对应关系，生成各图表所需数据结构的数据表。

进一步地，所述方法还包括对页面初始布局进行配置，包括对页面中初始网格的数量和大小进行配置。

进一步地，所述页面布局模块还用于对已进行页面布局的图表模型进行以下一种或多种布局调整：

接收鼠标对图表模板的拖拽，将所述图表模板移动至对应网格；

接收鼠标对图表模板的缩放，并根据缩放后所述图表模板的大小匹配至相应大小的网格；

接收针对图表模板图表类型的重新指定，获取新图表类型所需数据结构的数据表并生成新的图表模板；以及

接收对图表样式的修改。

以上一个或多个技术方案存在以下有益效果：

本申请无需针对具体业务需求进行开发，通过内置图表数据模板，获取数据源后通过自动解析并映射至各类图表所需的数据结构，用户可任意选择图表类型，并且对图表进行自定义的布局，灵活性强，大大提高了产品的复用率，减少了不必要的开发消耗，缩短了研发的周期，并且也可以通过使用者的个人需求，通过使用者的角度对页面进行需要的规划，减少了传统开发过程中需要传递需求进行开发的过程，提高了用户贴切的使用程度，达到了千人千面的数据展示效果，为使用者提供不同场景下的数据展示需求。

通过维护指标库和知识库，使得系统能够自适应地基于数据源匹配到具体业务场景，以及相应业务指标，然后基于知识库中各类图表的数据结构，即可生成满足各类图表数据结构的数据表，自动化程度高；并且，由于生成了满足各类图表数据结构的数据表，在后续页面布局调整过程中，能够实现图表类型的一键切换，效率高。

通过将页面进行分割解耦，一方面实现了页面布局的灵活配置，另一方面，实现了图表模块可任意拖拽移动。

附图说明

构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。

图1为本发明实施例一中所述基于内嵌式数据模板的自定义页面布局系统框架图；

图2为本发明实施例二中所述基于内嵌式数据模板的自定义页面布局方法流程图；

图3为本发明一个或多个实施例中数据清洗过程示意图；

图4为基于本发明页面布局系统的效果示意图；

图5为在特定应用场景下基于知识库关联的图表模板。

具体实施方式

应该指出，以下详细说明都是示例性的，旨在对本发明提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本发明的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。

在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

实施例一

本实施例公开了一种基于内嵌式数据模板的自定义页面布局系统，如图1所示，所述包括：

图表模板管理模块，用于对各类图表模板及其不同样式进行管理。

本实施例提供多种展现形式的图表集，比如柱状图、饼图、堆叠图、词云图等，还可根据需求自定义图表。

页面初始布局模块，用于对页面的初始网格布局进行配置。

所述页面初始布局模块能够预先存储多种初始网格布局，预置所述初始网格布局中每个网格的初始大小，便于用户选择。在展示页面本实施例采用类似Gridster的GridLayout栅格系统将页面进行分割成网格，作为基本数据展示单元。后续每一个添加的图表模型分别对应一个小的独立的数据展示单元，降低了每个图表模块之间的耦合性。

指标库管理模块，用于对各类业务相应的业务指标进行管理。所述指标库用于存储各类业务场景下相应的业务指标，用于与数据源建立关联。

知识库管理模块，用于对各类图表相应的数据结构进行管理。所述知识库用于管理各类图表相应的数据结构，以及指标库中业务指标与维度的对应关系，其中，所述数据结构包括不同维度的配置，包括各维度数据格式，例如文本维度/时间维度通常作为X轴，数值型维度作为Y轴，柱形图至少需要一个数值型维度。

所述知识库的构建方法包括：选择图表类型，对图表进行数据源构建，根据不同的图表类型，选择相应的维度与指标，即初始需要的数据格式和配置项，所述配置项可以包括所属业务场景、所属模板类型等。同一维度可选择多个数据源，可以形成较复杂的多维表格或图表，支持丰富的展现形式。知识库维护的越多图表匹配越容易，越多样化。

在平台中调取对应模块接口的方式也通过可视化编辑完成，通过模块的配置页面中接口的编辑即可完成对应模块接口的调用，无需对代码进行修改，对调取接口的方式进行了解耦方式的处理。

数据源处理模块，用于获取数据源，根据数据源格式识别相应数据库类型，基于所述数据库类型对数据源中的数据进行处理，映射到指定数据结构，生成满足各类图表所需数据结构的数据表。

具体包括：将数据源中的字段与指标库中的业务指标进行匹配；根据匹配成功的业务指标数据，基于知识库中各图表的数据结构，以及业务指标与维度的对应关系，生成各图表所需数据结构的数据表。

本实施例通过数据源处理模块对数据接入进行自动化清洗处理，首先，通过配置不同的数据库类型，比如mysql、oracle等,用于适配外部的数据源。拉取数据后进行数据分析与清洗，分析所属数据库，与指标库中的业务指标进行匹配，将字段匹配度高的去替换掉匹配度低的，从而将数据源与指标库建立关联。然后基于知识库中各图表数据结构的定义，以及业务指标与维度的对应关系，能够将数据源进行维度划分，基于各图表数据结构，对各个字段根据数据源进行重新赋值，完成数据清洗的过程，如图3所示。同时实现一种图表展现自动化的数据含义，从而实现图表展现自由。

作为一种可选的实施方式，还可以预先定义多个业务场景，知识库对不同业务场景下常用图表模板相应的数据结构进行管理，将数据源中的字段与指标库中的业务指标进行匹配得到具体业务场景后，基于知识库中与该业务场景关联的各类图表的数据结构，生成各图表所需数据结构的数据表。

例如针对设备管理业务场景，如图5所示，知识库可配置运行信息类、操作信息类、风险信息类和部署信息类多种类型的模块，每一种类型下又配置多种可视化模块，包括运行状态模块、逻辑拓扑图模块、事件总数等。基于指标库匹配确定设备管理业务场景后，用户可指定添加各种类型下的任意可视化模块。

图表生成模块，用于接收用户关于图表的选择及配置，所述配置包括配置数据源、图表模型的名称等，生成一个或多个图表；其中，所述数据源的配置包括维度和相应指标数据的选择。

经过数据源处理后，可简单形成充满数据的图表。接着可进行图表的样式配置，其中包含x轴、y轴的展现顺序、坐标轴反转、标签、图例等方面的具体配置。

经过数据分析，图表配置，将模块数据所有的模型进行提前预置，通过引用在互联网展示的主流图表展示插件，即可适配绝大多数的数据展示效果。

页面布局模块，用于对已生成的图表进行页面布局及页面调整，所述页面调整包括但不限于：接收鼠标点击图表并进行拖拽以及鼠标释放的动作，获取鼠标移动的栅格距离，将所述图表移动到相应网格；接收鼠标点击图表右下角并进行拖拉以及鼠标释放的动作，获取鼠标移动的栅格距离，对所述图表进行缩放，并根据缩放后图表的大小，匹配至相应大小的网格中；接收对样式的重新指定；以及，接收对图表类型的重新指定，获取所述图表相应的数据表进行可视化。

在拖拽平台页面，拉取已经配置好的图表模型进行展示，当使用者需要对某个模型数据进行展示时，只需要将对应的模型添加到面板即可，然后如根据不同使用者的页面展示需求，可以通过鼠标点击拖拽的方式将页面栅格系统中的模块进行组合排版，通过计算鼠标拖动的栅格距离进行计算，获取到拖拽的距离与鼠标释放的位置后，将模块移动到需要存放的位置，这里我们使用了框架原生自带的api(draggable)，真正实现了将页面碎片化打散并可以重新组合的方式。

在平台中通过借助resizedEvent接口，可以通过需要改变每个模块的大小，通过操作鼠标点击模块右下角然后拖拉的形式即可使模块的长宽高进行改变，并重新计算当前模块在页面中所占的布局大小，根据栅格布局的特性，将修改后的模块对应到页面中对应的独立网格中，然后重新进行页面布局，这样通过可视化的操作，使用者就可以根据他们不同需要，对页面展示的数据、展示的方式、展示的样式、展示的布局进行全面的个性化修改，做到千人千面独一无二。

在模块中，通过下拉选择改变，我们可以修改不同模块的展示状态，例如将原有柱状图数据改变为饼状图或者折线图进行展示，通过内置不同展示图表的模型，将原有图表数据的配置项拆分然后重新处理，处理成需要改变的图标模型配置参数，做到同一种数据通过自动化的数据处理，达到不同展示效果的展示。

由于在数据源处理阶段即生成了与所有图表相适配的数据表，因此可以灵活的实现图表的展现形式切换，一键切换成其支持的其他类型的图表，方便快捷。从而实现了一种数据能够使用多种图表展现，可从不同方面来观察数据，也可避免图表展示单一等问题。

实施例二

基于上述页面布局系统，本实施例提供了一种基于上述页面布局系统的页面布局方法，如图2所示，包括以下步骤：

步骤1：获取页面初始布局，所述页面初始布局包括多个网格，所述多个网格的大小和位置是经过预先配置的。

步骤2：获取数据源，根据数据源格式识别相应数据库类型，基于所述数据库类型对数据源中的数据进行处理，映射到指定数据结构，生成满足各类图表所需数据结构的数据表。

具体地，所述步骤2包括：将数据源中的字段与指标库中的业务指标进行匹配；根据匹配成功的业务指标数据，基于知识库中各图表的数据结构，以及业务指标与维度的对应关系，生成各图表所需数据结构的数据表。

步骤3：接收用户关于图表的选择及配置，所述配置包括配置数据源、图表模型的名称等，生成一个或多个图表；

步骤4：对已生成的图表进行页面布局及页面调整，所述页面调整包括但不限于：接收鼠标点击图表并进行拖拽以及鼠标释放的动作，获取鼠标移动的栅格距离，将所述图表移动到相应网格；接收鼠标点击图表右下角并进行拖拉以及鼠标释放的动作，获取鼠标移动的栅格距离，对所述图表进行缩放，并根据缩放后图表的大小，匹配至相应大小的网格中；接收对样式的重新指定；以及，接收对图表类型的重新指定，获取所述图表相应的数据表进行可视化。

本发明先是通过适配不同的数据库类型，对接不同的数据源进行数据清洗，通过较复杂的算法将数据分成维度与指标，选择图表及数据源进行数据填充，从而自定义配置不同的图表展示不同的数据。同时也支持图表的配置项可视化修改，根据个人爱好配置展现形式，实现图表自由。

本领域技术人员应该明白，上述本发明的各模块或各步骤可以用通用的计算机装置来实现，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。本发明不限制于任何特定的硬件和软件的结合。

上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (10)

1.一种基于内嵌式数据模板的自定义页面布局系统，其特征在于，包括：

图表模板管理模块，用于对各类图表模板进行管理；

数据源处理模块，用于获取数据源并进行解析，映射到各类图表所需的数据结构；

图表生成模块，用于接收针对图表的选择及配置，生成一个或多个图表模型；

页面布局模块，用于对已生成图表模型进行页面布局及布局调整。

2.如权利要求1所述的自定义页面布局系统，其特征在于，所述系统还包括指标库管理模块，用于对各类业务相应的业务指标进行管理；以及知识库管理模块，用于对各类图表相应的数据结构进行管理。

3.如权利要求2所述的自定义页面布局系统，其特征在于，所述数据源处理模块被配置为执行：

获取数据源，并提取所述数据源中的字段信息；

将所述字段信息与指标库中的业务指标进行匹配；

根据匹配成功的业务指标，基于知识库中各图表的数据结构，以及业务指标与维度的对应关系，生成各图表所需数据结构的数据表。

4.如权利要求1所述的自定义页面布局系统，其特征在于，所述系统还包括页面初始布局模块，用于对页面的初始网格布局进行配置，包括配置页面中初始网格的数量和大小。

5.如权利要求3或4所述的自定义页面布局系统，其特征在于，所述布局调整包括以下一种或多种：

接收鼠标对图表模板的拖拽，将所述图表模板移动至对应网格；

接收鼠标对图表模板的缩放，并根据缩放后所述图表模板的大小匹配至相应大小的网格；

接收针对图表模板图表类型的重新指定，获取新图表类型所需数据结构的数据表并生成新的图表模板；以及

接收对图表样式的修改。

6.一种基于内嵌式数据模板的自定义页面布局方法，其特征在于，预先存储各类图表模板，包括以下步骤：

获取数据源并进行解析，映射到各类图表所需的数据结构；

接收针对图表的选择及配置，生成一个或多个图表模型；

对已生成图表模型进行页面布局及布局调整。

7.如权利要求6所述自定义页面布局方法，其特征在于，预先配置指标库和知识库，所述指标库用于对各类业务相应的业务指标进行管理；所述知识库，用于对各类图表相应的数据结构进行管理。

8.如权利要求7所述自定义页面布局方法，其特征在于，所述映射到各类图表所需的数据结构包括：

获取数据源，并提取所述数据源中的字段信息；

将所述字段信息与指标库中的业务指标进行匹配；

根据匹配成功的业务指标，基于知识库中各图表的数据结构，以及业务指标与维度的对应关系，生成各图表所需数据结构的数据表。

9.如权利要求6所述的自定义页面布局方法，其特征在于，所述方法还包括接收针对页面初始布局的配置，包括对页面中初始网格的数量和大小进行配置。

10.如权利要求8或9所述的自定义页面布局方法，其特征在于，所述页面布局模块还用于对已进行页面布局的图表模型进行以下一种或多种布局调整：

接收鼠标对图表模板的拖拽，将所述图表模板移动至对应网格；

接收鼠标对图表模板的缩放，并根据缩放后所述图表模板的大小匹配至相应大小的网格；

接收针对图表模板图表类型的重新指定，获取新图表类型所需数据结构的数据表并生成新的图表模板；以及

接收对图表样式的修改。

Images