CN113868266B - 一种web前端的星型模型布局的生成方法及装置、电子设备 - Google Patents

Abstract

本发明涉及一种web前端的星型模型布局的生成方法及装置、电子设备，具体方法包括，对维度表进行排序，将排好序的维度表划分为左列和右列；获取每列中维度表的高度和宽度数据，确定最大的宽度为该列的列宽，根据每个维度表的高度之和，以及预设的纵向间隔数据，确定该列的列高；根据列的宽高数据，预设的纵向间隔及横向间隔数据，以及事实表的宽高数据，确定展示区域的宽度数据和高度数据；将事实表配置于展示区域的中心，以及按照排序，生成左列的维度表和右列的维度表。本发明可以根据事实表与维度表、以及事实表与维度表的关联关系来计算出各个表按照星型模型排列时的位置，自动实现星型模型的布局，提高开发效率。

Description

一种web前端的星型模型布局的生成方法及装置、电子设备

技术领域

本发明涉及数据可视化的技术领域，特别是涉及一种web前端的星型模型布局的生成方法及装置、电子设备。

背景技术

事实表，是记录描述事实的结构化数据的表，用来记录分析的内容的全量信息，包含了每个事件的具体要素，以及具体发生的事情，比如银行交易信息、订单信息等；维度表则是事实表引用到的代码表，是对事实表中事件的要素的描述信息，代表用户观察该事务的角度，比如银行账户、订单客户等。

星型模型是最简单常用的一种数据模型，它由一个事实表（FactTable）和一组维表（DimensionTable）组成，以事实表为中心，所有的维度表直接连接在事实表上，画出来的结构图看起来像星星一样，所以叫做星型模型，如图1所示：

图1为标准的星形数据模型，其中，事实表中存储有时间ID、地区ID、部门ID、产品ID以及销售金额和销售数量，维度表则对应为时间维表、地区维表、部门维表和产品维表，各维表包含具体的描述信息。

然而目前市面上所开发的可视化数仓建模平台，都没有自动根据事实表和维度表自动实现如图1所示的星型模型的布局方法。而在实际的开发当中，一张事实表往往会关联许多张维度表，这使得维度表数量经常会超过10张；因此，当维度表的数量较多的情况下，如果只能通过手动调整布局的话，效率十分低下，极大程度地影响开发的进度与使用者的使用体验。

发明内容

本发明提供了一种web前端的星型模型布局的生成方法及装置、电子设备，可以根据事实表与维度表、以及事实表与维度表的关联关系来计算出各个表按照星型模型排列时的位置，自动实现星型模型的布局，提高开发效率。

第一方面，本发明提供了一种web前端的星型模型布局的生成方法，所述星型模型包括事实表和多个维度表，所述方法包括：

对所述维度表进行排序，将排好序的所述维度表划分为左列和右列；

获取每个所述左列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据leftSideMaxWidth为左列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述左列的列高leftSideHeight，所述纵向间隔数据包括每个所述维度表之间在纵向上的间隔数据gapY；

获取每个所述右列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据rightSideMaxWidth为右列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述右列的列高rightSideHeight；

根据所述左列的列宽和所述右列的列宽，以及所述事实表的宽度数据centerElWidth和预设的横向间隔数据，获取宽度总和allWidth，将宽度总和与预设的展示区域的宽度数据boardWidth比较，取较大值赋值给所述展示区域的宽度数据boardWidth；

将所述左列的列高leftSideHeight、所述右列的列高rightSideHeight、所述事实表的高度数据centerElHeight和预设的展示区域的高度数据boardHeight比较，取较大值赋值给所述展示区域的高度数据boardHeight；

将所述事实表配置于所述展示区域的中心，以及按照排序，生成左列的所述维度表和右列的所述维度表。

进一步地，将所述事实表配置于所述展示区域的中心前，还包括如下步骤：

获取所述事实表的宽度数据centerElWidth和高度数据centerElHeight；

获取所述展示区域的宽度数据boardWidth和高度数据boardHeight；

确定所述事实表的坐标数据（centerX，centerY），其中，所述事实表的横坐标centerX=（boardWidth-centerElWidth）/2，所述事实表的纵坐标centerY=（boardHeight-centerElHeight）/2。

进一步地，生成左列的所述维度表和右列的所述维度表前，还包括如下步骤：

确定所述左列的第一个维度表的纵坐标leftStartY=(boardHeight-leftSideHeight)/2；

确定所述左列下一个维度表的纵坐标位置leftY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.leftY+rect.height+gapY；

确定所述右列的第一个维度表的纵坐标rightStartY=(boardHeight-rightSideHeight)/2；

确定所述右列下一个维度表的纵坐标位置rightY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.rightY+rect.height+gapY。

进一步地，生成左列的所述维度表和右列的所述维度表前，还包括如下步骤：

获取所述左列和所述右列中与所述事实表之间的横向间隔数据gapX；

获取所述维度表的宽度数据rect.width；

确定所述维度表所在列的第一个维度表的横坐标位置StartX=StartX=centerX±gapX±rect.width；

确定所述维度表的横坐标位置rect.x=StartX。

进一步地，对所述维度表进行排序，包括：

根据所述事实表的字段，从上到下进行扫描；

按照该从上到下进行扫描的顺序将与所述事实表的字段连线的维度表优先排到数组的前面，没有连线的所述维度表排列至有连线的所述维度表后面。

进一步地，将排好序的所述维度表划分为左列和右列，包括：

将排好序的维度表进行遍历，分成左列和右列；

将第偶数个维度表放到左列，将第奇数个维度表放到右列。

进一步地，将第偶数个维度表放到左列，将第奇数个维度表放到右列，包括：

声明一个名为rect的对象变量用于保存维度表的信息；

创建两个数组leftRects和rightRects，如果当前维度表是偶数，则将对象变量rect保存到leftRects中；如果当前维度表是奇数，则保存到rightRects中。

第二方面，本发明提供了一种web前端的星型模型布局的生成装置，所述装置包括：

排序模块，用于对维度表进行排序，将排好序的所述维度表划分为左列和右列；

左列数据计算模块，用于获取每个所述左列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据leftSideMaxWidth为左列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述左列的列高leftSideHeight，所述纵向间隔数据包括每个所述维度表之间在纵向上的间隔数据gapY；

右列数据计算模块，用于获取每个所述右列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据rightSideMaxWidth为右列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述右列的列高rightSideHeight；

展示区域宽度计算模块，用于根据所述左列的列宽和所述右列的列宽，以及事实表的宽度数据centerElWidth和预设的横向间隔数据，获取宽度总和allWidth，将宽度总和与预设的展示区域的宽度数据boardWidth比较，取较大值赋值给所述展示区域的宽度数据boardWidth；

展示区域高度计算模块，用于将所述左列的列高leftSideHeight、所述右列的列高rightSideHeight、所述事实表的高度数据centerElHeight和预设的展示区域的高度数据boardHeight比较，取较大值赋值给所述展示区域的高度数据boardHeight；

配置生成模块，用于将所述事实表配置于所述展示区域的中心，以及按照排序，生成左列的所述维度表和右列的所述维度表。

第三方面，本发明提供了一种电子设备，包括：

至少一个存储器以及至少一个处理器；

所述存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如本申请实施例第一方面所述的web前端的星型模型布局的生成方法的步骤。

第四方面，本发明提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如本申请实施例第一方面所述的web前端的星型模型布局的生成方法的步骤。

本发明根据事实表与维度表的对应连线关系对维度表进行排序，将排序后的维度表分为左列和右列，将各列中具有最大宽度的维度表的宽度作为列宽，将各列维度表高度之和预设的纵向间隔之和作为列高，并根据计算出的左列及右列的列宽和列高，将左列及右列的列高与事实表的高度相比较，取较大者作为展示区域的高度数据，将事实表的宽度以及左列及右列的宽度与预设的横向间隔数据的总和作为展示区域的宽度数据，基于上述计算所得数据建立坐标系，将事实表配置于展示区域的中心，同时根据排序的顺序生成左列的维度表和右列的维度表。本发明所提供的一种web前端的星型模型布局的生成方法使得星型模型的布局无需手动调整，而是根据源数据表及预设数据瞬间实现自动布局，同时避免维度表之间的重叠以及维度表与事实表之间的重叠，布局简洁清楚的同时也大大提升了开发效率。

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

附图说明

图1为现有技术中提供的一种标准的星形数据模型的结构示意图；

图2为在一个示例性的实施例中提供的一种web前端的星型模型布局的生成方法的流程图；

图3为在一个示例性的实施例中提供的一种web前端的星型模型布局的生成方法的布局示意图；

图4为在一个示例性的实施例中提供的一种web前端的星型模型布局的生成装置的结构示意图；

图5为在一个示例性的实施例中提供的一种电子设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。

应当明确，所描述的实施例仅仅是本申请实施例一部分实施例，而不是全部的实施例。基于本申请实施例中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本申请实施例保护的范围。

在本申请实施例使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请实施例。在本申请实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。在本申请的描述中，需要理解的是，术语“第一”、“第二”、“第三”等仅用于区别类似的对象，而不必用于描述特定的顺序或先后次序，也不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本申请中的具体含义。

此外，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

针对背景技术中的技术问题，本申请实施例提供了一种web前端的星型模型布局的生成方法，可以根据事实表与维度表、以及事实表与维度表的关联关系来计算出各个表按照星型模型排列时的位置，自动实现星型模型的布局，提高开发效率。

如图2所示，在一个实施例中，所述方法包括如下步骤：

S201：对维度表进行排序，将排好序的维度表划分为左列和右列。

其中，左列为将配置于事实表左侧的维度表，右列为将配置于事实表右侧的维度表。

在本实施例中，对所述维度表进行排序，包括根据所述事实表的字段，从上到下进行扫描；根据事实表和维度表连线的关系，对维度表进行排序，同时按照该顺序将与其连线的维度表优先排到数组的前面，没有连线的维度表排序有连线的后面。

在一个具体的例子中，根据事实表的字段从上到下进行扫描，按照该顺序将与其连线的维度表排到前面。例如事实表的字段1和维度表a进行了连线、字段3与维度表c进行了连线，那么排列的顺序的就是a优先于c。

在本实施例中，实现将排序后的维度表划分为左列和右列的方法为，将所述维度表进行遍历，分成左列和右列；其中，将第偶数个维度表放到左列，将第奇数个维度表放到右列。在遍历维度表的过程中，需要将该表的宽高和默认的位置等信息保存起来，并进行与展示区域大小有关的计算。

在一个具体的例子中，保存维度表信息的具体步骤为，声明一个名为rect的对象变量用于保存维度表的信息；创建两个数组leftRects和rightRects，如果当前维度表是偶数，则将对象变量rect保存到leftRects中；如果当前维度表是奇数，则保存到rightRects中。

具体的，需声明的变量包括：

变量名为rect需保存的信息如下：

S202：获取每个左列的维度表的高度数据height和宽度数据width，确定最大的宽度数据leftSideMaxWidth为左列的列宽，根据每个高度数据height之和，以及预设的纵向间隔数据，确定左列的列高leftSideHeight，纵向间隔数据包括每个维度表之间在纵向上的间隔数据gapY。

S203：获取每个右列的维度表的高度数据height和宽度数据width，确定最大的宽度数据rightSideMaxWidth为右列的列宽，根据每个高度数据height之和，以及预设的纵向间隔数据，确定右列的列高rightSideHeight。

在一个具体的例子中，先判断当前维度表是划分为左列还是右列，如果是左列，则判断当前维度表的宽度width是否比左列最大表宽度leftSideMaxWidth要大，如果是则把width值赋给leftSideMaxWidth；如果是右列，则与rightSideMaxWidth作比较判断和赋值操作；这样，当维度表遍历完成后，即可得出左列和右列最宽的表的宽度数据，也即该列的列宽。

如果当前维度表在左列，则将当前维度的高度height和gapY累加到变量leftSideHeight上；同理，如果维度表在右列，则累加到变量rightSideHeight上。当维度表遍历完成后，即可得出该列的列高。

S204：根据左列的列宽和右列的列宽，以及事实表的宽度数据centerElWidth和预设的横向间隔数据，获取宽度总和allWidth，将宽度总和与预设的展示区域的宽度数据boardWidth比较，取较大值赋值给展示区域的宽度数据boardWidth。

取默认的展示区域宽度（boardWidth）与左中右三列的表的宽度总和（allWidth）之间数值较大的那一个；因此，这里需要分为两步，先计算allWidth，再比较boardWidth与allWidth，具体计算公式如下：

allWidth=gapX+leftSideMaxWidth+gapX+centerElWidth+gapX+rightSideMaxWidth+gapX

boardWidth=Math.max(boardWidth，allWidth)

通过Math.max方法得出默认的boardWidth与allWidth两者较大的那一个，并把结果重新赋值给boardWidth变量。

S205：将左列的列高leftSideHeight、右列的列高rightSideHeight、事实表的高度数据centerElHeight和预设的展示区域的高度数据boardHeight比较，取较大值赋值给展示区域的高度数据boardHeight。

leftSideHeight、中间列高度centerSideHeight、右列高度rightSideHeight还有展示区域默认的高度boardHeight这四个值，其中最大值即为展示区域高度数据，计算公式如下：

boardHeight=Math.max(leftSideHeight，centerSideHeight，rightSideHeight，boardHeight)

S206：将事实表配置于展示区域的中心，以及按照排序，生成左列的维度表和右列的维度表。

在一个具体的例子中，将事实表配置于所述展示区域的中心，具体包括如下步骤：

获取所述事实表的宽度数据centerElWidth和高度数据centerElHeight；

获取所述展示区域的宽度数据boardWidth和高度数据boardHeight；

确定所述事实表的坐标数据（centerX，centerY），其中，所述事实表的横坐标centerX=（boardWidth-centerElWidth）/2，所述事实表的纵坐标centerY=（boardHeight-centerElHeight）/2。

具体的，设置展示区域的左上角的坐标为（0,0），从左往右的横坐标数值递增，从上至下的纵坐标也是递增；计算得出的事实表的横坐标声明为centerX，纵坐标声明为centerY，计算方法如下：

横坐标=(展示区域宽度-事实表的宽度)/2

即centerX=(boardWidth-centerElWidth)/2

纵坐标=(展示区域高度-事实表的高度)/2

即centerY=(boardHeight-centerElHeight)/2

在一个具体的例子中，确定维度表的纵坐标数据，具体包括：

确定所述左列的第一个维度表的纵坐标leftStartY=(boardHeight-leftSideHeight)/2；

确定所述左列下一个维度表的纵坐标位置leftY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.leftY+rect.height+gapY；

确定所述右列的第一个维度表的纵坐标rightStartY=(boardHeight-rightSideHeight)/2；

确定所述右列下一个维度表的纵坐标位置rightY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.rightY+rect.height+gapY。

在一个具体的例子中，确定维度表的横坐标数据，具体包括：

获取所述左列和所述右列中与所述事实表之间的横向间隔数据gapX；

获取所述维度表的宽度数据rect.width；

确定所述维度表所在列的第一个维度表的横坐标位置StartX=StartX=centerX±gapX±rect.width；

确定所述维度表的横坐标位置rect.x=StartX。

具体的，根据事实表的坐标，计算事实表左右两侧的维度表的坐标。

计算左列维度表的坐标，需遍历leftRects数组中的维度表信息rect，将计算得出的横坐标赋值给rect的x，将纵坐标赋值给rect的y。在左列中的各维度表的宽度不同，因此需整列实现右对齐，即左列每个维度表与中间列（事实表）的间隔均为gapX。因此，计算维度表横向坐标需要事实表横向坐标centerX、维度表本身的宽度rect.width以及列之间的间隔gapX；计算左列各维度表的纵坐标需确定左列的第一个维度表的位置，同时实现左列在展示区域的纵向居中，因此，第一个维度表的纵坐标需通过boardHeight与leftSideHeight计算得出，将从上往下第一个左列维度表开始的纵向坐标声明为变量leftStartY，其初始值为：

leftStartY=boardHeight-(leftSideHeight-2*gapY))/2

左列维度表的横纵坐标计算方法如下：

横坐标=事实表横坐标-列间隔-维度表宽度

即rect.x=centerX-gapX-rect.width

纵坐标=leftStartY=>rect.y=leftStartY

计算下个维度表纵坐标：

leftStartY=当前维度表纵坐标+当前维度表高度+维度表纵向间隔=leftStartY+rect.height+gapY

计算右列维度表的坐标，需遍历rightRects中维度表信息rect进行计算。右列维度表需整列实现左对齐，即右列每个维度表与中间列（事实表）的间隔均为gapX，因此，计算右列维度表的横坐标需要事实表横坐标centerX、事实表宽度centerElWidth、列横向间隔gapX；计算右列维度表的纵坐标方法同计算左列维度表的纵坐标方法相同，首先要计算右列在展示区域纵向居中时最上方维度表的纵坐标，声明为变量rightStartY,初始值为：

rightStartY=(展示区域高度-右列高度)/2

即rightStartY=(boardHeight-(rightSideHeight-2*gapY))/2

右列维度表的横纵坐标计算方法如下：

横坐标=事实表横坐标+事实表宽度+横向间隔

即rect.x=centerX+centerElWidth+gapX

纵坐标=rightStartY

接着需要计算下个维度表纵坐标：

rightStartY=rightStartY+rect.height+gapY

在确定各维度表和事实表的坐标之后，将左列和右列的维度表信息合并，也即将leftRects和rightRects两个数组的数据合并到一个新的数组当中，命名为aroundRects。

将算法计算得出的全部数据返回，通过对计算得出的展示区域宽高和维度表与事实表的坐标信息进行赋值来快速实现星型模型布局，具体实现的星型模型布局示意图如图3所示，图3为在一个示例性的实施例中提供的一种web前端的星型模型布局的生成方法的布局示意图。其中，所述返回的数据如下：

{

boardWidth, // 展示区域实际需要的宽度

boardHeight, // 展示区域实际需要的高度

centerX, // 事实表横坐标

centerY, // 事实表纵坐标

aroundRects // 维度表的坐标

}

图4为一种web前端的星型模型布局的生成装置的结构示意图，如图4所示，所述web前端的星型模型布局的生成装置400包括：

排序模块401，用于对所述维度表进行排序，将排好序的所述维度表划分为左列和右列；

左列数据计算模块402，用于获取每个所述左列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据leftSideMaxWidth为左列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述左列的列高leftSideHeight，所述纵向间隔数据包括每个所述维度表之间在纵向上的间隔数据gapY；

右列数据计算模块403，用于获取每个所述右列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据rightSideMaxWidth为右列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述右列的列高rightSideHeight；

展示区域宽度计算模块404，用于根据所述左列的列宽和所述右列的列宽，以及所述事实表的宽度数据centerElWidth和预设的横向间隔数据，获取宽度总和allWidth，将宽度总和与预设的展示区域的宽度数据boardWidth比较，取较大值赋值给所述展示区域的宽度数据boardWidth；

展示区域高度计算模块405，用于将所述左列的列高leftSideHeight、所述右列的列高rightSideHeight、所述事实表的高度数据centerElHeight和预设的展示区域的高度数据boardHeight比较，取较大值赋值给所述展示区域的高度数据boardHeight；

配置生成模块406，用于将所述事实表配置于所述展示区域的中心，以及按照排序，生成左列的所述维度表和右列的所述维度表。

在一个示例性的实施例中，所述配置生成模块406还包括：

事实表宽高数据获取单元，用于获取所述事实表的宽度数据centerElWidth和高度数据centerElHeight；

展示区域宽高数据获取单元，用于获取所述展示区域的宽度数据boardWidth和高度数据boardHeight；

事实表坐标确定单元，用于确定所述事实表的坐标数据（centerX，centerY），其中，所述事实表的横坐标centerX=（boardWidth-centerElWidth）/2，所述事实表的纵坐标centerY=（boardHeight-centerElHeight）/2。

在一个示例性的实施例中，还包括：

第一位置确定模块，用于确定所述左列的第一个维度表的纵坐标leftStartY=(boardHeight-leftSideHeight)/2；

第二位置确定模块，用于确定所述左列下一个维度表的纵坐标位置leftY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.leftY+rect.height+gapY；

第三位置确定模块，用于确定所述右列的第一个维度表的纵坐标rightStartY=(boardHeight-rightSideHeight)/2；

第四位置确定模块，用于确定所述右列下一个维度表的纵坐标位置rightY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.rightY+rect.height+gapY。

在一个示例性的实施例中，还包括：

第一数据获取模块，用于获取所述左列和所述右列中与所述事实表之间的横向间隔数据gapX；

第二数据获取模块，用于获取所述维度表的宽度数据rect.width；

第五位置确定模块，用于确定所述维度表所在列的第一个维度表的横坐标位置StartX=StartX=centerX±gapX±rect.width；

第六位置确定模块，用于确定所述维度表的横坐标位置rect.x=StartX。

在一个示例性的实施例中，排序模块401还包括：

扫描单元，用于根据所述事实表的字段，从上到下进行扫描；

维度表排序单元，按照该顺序将与所述事实表的字段连线的维度表优先排到数组的前面，没有连线的所述维度表排列至有连线的所述维度表后面。

在一个示例性的实施例中，排序模块401还包括：

遍历单元，用于将排好序的维度表进行遍历，分成左列和右列；

划分单元，用于将第偶数个维度表放到左列，将第奇数个维度表放到右列。

在一个示例性的实施例中，所述划分单元具体包括：

声明单元，声明一个名为rect的对象变量用于保存维度表的信息；

数组创建单元，创建两个数组leftRects和rightRects，如果当前维度表是偶数，则将对象变量rect保存到leftRects中；如果当前维度表是奇数，则保存到rightRects中。

如图5所示，图5是本申请实施例根据一示例性实施例示出的一种电子设备的结构框图。

所述电子设备包括处理器510和存储器520。该主控芯片中处理器510的数量可以是一个或者多个，图5中以一个处理器510为例。该主控芯片中存储器520的数量可以是一个或者多个，图5中以一个存储器520为例。

存储器520作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本申请实施例任意实施例所述的web前端的星型模型布局的生成方法程序，以及本申请实施例任意实施例所述的web前端的星型模型布局的生成方法对应的程序指令/模块。存储器520可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器520可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器520可进一步包括相对于处理器510远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

处理器510通过运行存储在存储器520中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述任一实施例所记载的web前端的星型模型布局的生成方法。

本申请实施例还提供了一种计算机可读存储介质，其上储存有计算机程序，该计算机程序被处理器执行时实现上述任意一个实施例所述的web前端的星型模型布局的生成方法。

本发明可采用在一个或多个其中包含有程序代码的存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可读储存介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其它数据。计算机的存储介质的例子包括但不限于：相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其它类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其它内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其它光学存储、磁盒式磁带，磁带磁磁盘存储或其它磁性存储设备或任何其它非传输介质，可用于存储可以被计算设备访问的信息。

本申请实施例根据事实表与维度表的对应连线关系对维度表进行排序，将排序后的维度表分为左列和右列，将各列中具有最大宽度的维度表的宽度作为列宽，将各列维度表高度之和预设的纵向间隔之和作为列高，并根据计算出的左列及右列的列宽和列高，将左列及右列的列高与事实表的高度相比较，取较大者作为展示区域的高度数据，将事实表的宽度以及左列及右列的宽度与预设的横向间隔数据的总和作为展示区域的宽度数据，基于上述计算所得数据建立坐标系，将事实表配置于展示区域的中心，同时根据排序的顺序生成左列的维度表和右列的维度表。本申请实施例所提供的一种web前端的星型模型布局的生成方法使得星型模型的布局无需手动调整，而是根据源数据表及预设数据瞬间实现自动布局，同时避免维度表之间的重叠以及维度表与事实表之间的重叠，布局简洁清楚的同时也大大提升了开发效率。

应当理解的是，本申请实施例并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请实施例的范围仅由所附的权利要求来限制。

以上所述实施例仅表达了本申请实施例的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请实施例构思的前提下，还可以做出若干变形和改进，这些都属于本申请实施例的保护范围。

Claims (7)

1.一种web前端的星型模型布局的生成方法，所述星型模型包括事实表和多个维度表，其特征在于，所述方法包括：

对所述维度表进行排序，将排好序的所述维度表划分为左列和右列，所述排序方法包括如下步骤：根据所述事实表的字段，从上到下进行扫描；按照该从上到下进行扫描的顺序将与所述事实表的字段连线的维度表优先排列，没有连线的所述维度表排列至有连线的所述维度表后面；所述维度表划分方法包括如下步骤：将排好序的维度表进行遍历，分成左列和右列；创建两个数组leftRects和rightRects，如果当前维度表是偶数，则将对象变量rect保存到leftRects中；如果当前维度表是奇数，则保存到rightRects中；声明一个名为rect的对象变量用于保存维度表的信息；获取每个所述左列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据leftSideMaxWidth为左列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述左列的列高leftSideHeight，所述纵向间隔数据包括每个所述维度表之间在纵向上的间隔数据gapY；

获取每个所述右列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据rightSideMaxWidth为右列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述右列的列高rightSideHeight；

根据所述左列的列宽和所述右列的列宽，以及所述事实表的宽度数据centerElWidth和预设的横向间隔数据，获取宽度总和allWidth，将宽度总和与预设的展示区域的宽度数据boardWidth比较，取较大值赋值给所述展示区域的宽度数据boardWidth；

将所述左列的列高leftSideHeight、所述右列的列高rightSideHeight、所述事实表的高度数据centerElHeight和预设的展示区域的高度数据boardHeight比较，取较大值赋值给所述展示区域的高度数据boardHeight；

将所述事实表配置于所述展示区域的中心，以及按照排序，生成左列的所述维度表和右列的所述维度表。

2.根据权利要求1所述的一种web前端的星型模型布局的生成方法，其特征在于，将所述事实表配置于所述展示区域的中心前，还包括如下步骤：

获取所述事实表的宽度数据centerElWidth和高度数据centerElHeight；

获取所述展示区域的宽度数据boardWidth和高度数据boardHeight；

确定所述事实表的坐标数据（centerX，centerY），其中，所述事实表的横坐标centerX=（boardWidth-centerElWidth）/2，所述事实表的纵坐标centerY=（boardHeight-centerElHeight）/2。

3.根据权利要求2所述的一种web前端的星型模型布局的生成方法，其特征在于，生成左列的所述维度表和右列的所述维度表前，还包括如下步骤：

确定所述左列的第一个维度表的纵坐标leftStartY=(boardHeight-leftSideHeight)/2；

确定所述左列下一个维度表的纵坐标位置leftY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.leftY+rect.height+gapY；

确定所述右列的第一个维度表的纵坐标rightStartY=(boardHeight-rightSideHeight)/2；

确定所述右列下一个维度表的纵坐标位置rightY=当前所述维度表纵坐标+当前所述维度表高度+所述维度表纵向间隔=rect.rightY+rect.height+gapY。

4.根据权利要求3所述的一种web前端的星型模型布局的生成方法，其特征在于，生成左列的所述维度表和右列的所述维度表前，还包括如下步骤：

获取所述左列和所述右列中与所述事实表之间的横向间隔数据gapX；

获取所述维度表的宽度数据rect.width；

确定所述维度表所在列的第一个维度表的横坐标位置StartX=centerX±gapX±rect.width；

确定所述维度表的横坐标位置rect.x=StartX。

5.一种web前端的星型模型布局的生成装置，其特征在于，所述装置包括：

排序模块，用于对维度表进行排序，将排好序的所述维度表划分为左列和右列，所述排序方法包括如下步骤：根据事实表的字段，从上到下进行扫描；按照该从上到下进行扫描的顺序将与所述事实表的字段连线的维度表优先排列，没有连线的所述维度表排列至有连线的所述维度表后面；所述维度表划分方法包括如下步骤：将排好序的维度表进行遍历，分成左列和右列；创建两个数组leftRects和rightRects，如果当前维度表是偶数，则将对象变量rect保存到leftRects中；如果当前维度表是奇数，则保存到rightRects中；声明一个名为rect的对象变量用于保存维度表的信息；

左列数据计算模块，用于获取每个所述左列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据leftSideMaxWidth为左列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述左列的列高leftSideHeight，所述纵向间隔数据包括每个所述维度表之间在纵向上的间隔数据gapY；

右列数据计算模块，用于获取每个所述右列的所述维度表的高度数据height和宽度数据width，确定最大的所述宽度数据rightSideMaxWidth为右列的列宽，根据每个所述高度数据height之和，以及预设的纵向间隔数据，确定所述右列的列高rightSideHeight；

展示区域宽度计算模块，用于根据所述左列的列宽和所述右列的列宽，以及事实表的宽度数据centerElWidth和预设的横向间隔数据，获取宽度总和allWidth，将宽度总和与预设的展示区域的宽度数据boardWidth比较，取较大值赋值给所述展示区域的宽度数据boardWidth；

展示区域高度计算模块，用于将所述左列的列高leftSideHeight、所述右列的列高rightSideHeight、所述事实表的高度数据centerElHeight和预设的展示区域的高度数据boardHeight比较，取较大值赋值给所述展示区域的高度数据boardHeight；

配置生成模块，用于将所述事实表配置于所述展示区域的中心，以及按照排序，生成左列的所述维度表和右列的所述维度表。

6.一种电子设备，其特征在于，包括：

至少一个存储器以及至少一个处理器；

所述存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1至4任一项所述的web前端的星型模型布局的生成方法的步骤。

7.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至4任一项所述的web前端的星型模型布局的生成方法的步骤。

Images