CN117075863B - 一种基于json数据生成屏幕场景的方法及系统 - Google Patents

Abstract

本发明公开了一种基于JSON数据生成屏幕场景的方法及系统，涉及计算机技术领域。该方法包括：获取JSON数据，根据JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，容器层级在最顶层；获取用户输入的属性值，根据属性值对画布层级和图层层级的属性进行设置；通过容器层级的适配器创建图表，并通过适配器获取用户输入的图表数据，将图表数据传给图表进行展示。本发明采用JSON数据的方式来控制web界面图表布局和交互，用户可以通过简单的操作和修改，快速地构建自定义的大屏展示效果，具有简单易用且效率高的优点，可以有效地提高大屏的定制化展示效果。

Description

一种基于JSON数据生成屏幕场景的方法及系统

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于JSON数据生成屏幕场景的方法及系统。

背景技术

目前，一些基于Web技术的大屏展示平台，提供了可视化图表库和自定义布局功能，用户可以通过代码编写来实现自定义的大屏展示效果。一些大屏展示系统也提供了自定义的大屏展示功能，用户可以通过拖拽组件的方式来设计和排版展示屏幕。

然而，这些现有技术的场景设计与代码高度绑定，都需要一定的编码能力和学习门槛，对于一些不具备编程能力的用户来说，这些工具和库的使用并不方便，难以简便地实现大屏展示效果。

发明内容

本发明所要解决的是现有的大屏幕显示功能实现需要一定的编码门槛，难以简便地实现大屏展示效果的问题，为了解决上述技术问题，本发明提供了一种基于JSON数据生成屏幕场景的方法及系统。

第一个方面，提供了一种基于JSON数据生成屏幕场景的方法，包括：

获取JSON数据，根据所述JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，所述容器层级在最顶层；

获取用户输入的属性值，根据所述属性值对所述画布层级和所述图层层级的属性进行设置；

通过所述容器层级的适配器创建图表，并通过所述适配器获取用户输入的图表数据，将所述图表数据传给所述图表进行展示。

在第一个方面的一种可能实现中，获取JSON数据之后，还包括：

根据所述JSON数据设置编组层级，所述编组层级在所述图层层级和所述容器层级之间展示；

其中，所述编组层级用于将至少一个容器层级组合在一起展示。

在第一个方面的一种可能实现中，获取用户输入的属性值，根据所述属性值对所述画布层级和所述图层层级的属性进行设置，具体包括：

通过所述UI层级获取用户输入的属性值，并将所述属性值传给所述画布层级和所述图层层级；

根据所述属性值设置所述画布层级的尺寸和背景颜色；

根据所述属性值设置所述图层层级相对于所述画布层级的位置和尺寸，并设置图层层级的数量。

在第一个方面的一种可能实现中，还包括：

通过所述UI层级获取用户输入的操作指令，并将所述操作指令传给所述编组层级；

根据所述操作指令对所述编组层级的同一组合内的所有容器层级进行相同的操作。

在第一个方面的一种可能实现中，所述UI层级的JSON数据包括UI类型、UI属性和UI子层级，其中，UI子层级为数组格式，包含画布层级的一个JSON数据；所述画布层级的JSON数据包括画布类型、画布属性和画布子层级，其中，所述画布子层级为数组格式，包含图层层级的至少一个JSON数据；所述图层层级的JSON数据包括图层类型、图层属性和图层子层级，其中，所述图层子层级为数组格式，包含编组层级的至少一个JSON数据；所述编组层级的JSON数据包括编组类型、编组属性和编组子层级，其中，所述编组子层级为数组格式，包含容器层级的至少一个JSON数据；所述容器层级的JSON数据包括容器类型、容器属性和适配器。

第二个方面，提供了一种基于JSON数据生成屏幕场景的系统，包括：

层级设置单元，用于获取JSON数据，根据所述JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，所述容器层级在最顶层；

属性设置单元，用于获取用户输入的属性值，根据所述属性值对所述画布层级和所述图层层级的属性进行设置；

图表展示单元，用于通过所述容器层级的适配器创建图表，并通过所述适配器获取用户输入的图表数据，将所述图表数据传给所述图表进行展示。

在第二方面的一种可能实现中，所述层级设置单元还用于根据所述JSON数据设置编组层级，所述编组层级在所述图层层级和所述容器层级之间展示；

其中，所述编组层级用于将至少一个容器层级组合在一起展示。

在第二方面的一种可能实现中，所述属性设置单元具体用于通过所述UI层级获取用户输入的属性值，并将所述属性值传给所述画布层级和所述图层层级；根据所述属性值设置所述画布层级的尺寸和背景颜色；根据所述属性值设置所述图层层级相对于所述画布层级的位置和尺寸，并设置图层层级的数量。

在第二方面的一种可能实现中，还包括：

层级控制单元，用于通过所述UI层级获取用户输入的操作指令，并将所述操作指令传给所述编组层级；根据所述操作指令对所述编组层级的同一组合内的所有容器层级进行相同的操作。

在第二方面的一种可能实现中，所述UI层级的JSON数据包括UI类型、UI属性和UI子层级，其中，UI子层级为数组格式，包含画布层级的一个JSON数据；所述画布层级的JSON数据包括画布类型、画布属性和画布子层级，其中，所述画布子层级为数组格式，包含图层层级的至少一个JSON数据；所述图层层级的JSON数据包括图层类型、图层属性和图层子层级，其中，所述图层子层级为数组格式，包含编组层级的至少一个JSON数据；所述编组层级的JSON数据包括编组类型、编组属性和编组子层级，其中，所述编组子层级为数组格式，包含容器层级的至少一个JSON数据；所述容器层级的JSON数据包括容器类型、容器属性和适配器。

由于JSON数据更容易理解和解释，便于数据操作和管理，且JSON数据的通用性和可扩展性较好，可以使它适应不同的场景和需求，因此本方案采用JSON数据的方式来控制web界面图表布局和交互，用户可以通过简单的操作和修改，快速地构建自定义的大屏展示效果，具有简单易用且效率高的优点，可以有效地提高大屏的定制化展示效果。

本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

图1为本发明基于JSON数据生成屏幕场景的方法的实施例提供的流程示意图；

图2为本发明基于JSON数据生成屏幕场景的方法的实施例提供的数据存储与调用流程示意图；

图3为本发明基于JSON数据生成屏幕场景的方法的实施例提供的层级关系示意图；

图4为本发明基于JSON数据生成屏幕场景的方法的实施例提供的web展示效果示意图；

图5为本发明基于JSON数据生成屏幕场景的方法的实施例提供的图表展示效果示意图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实施例只用于解释本发明，并非用于限定本发明的范围。

如图1所示，为本发明基于JSON数据生成屏幕场景的方法的实施例提供的流程示意图，该基于JSON数据生成屏幕场景的方法包括：

S1，获取JSON数据，根据JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，容器层级在最顶层；

应理解，每个层级都有一个JSON数据，JSON数据记录了单个层级的所有状态。

UI层级用于处理外界的操作，并且是可视化场景的第一层级，UI层级是可视化场景自带的，控制可视化场景的显示范围，负责接收和处理用户的输入，并将其传递给下面层级。

画布层级通常只有1个，其包含所有的图层层级，画布的展示大小等于整个可视化大屏的分辨率。用户可以通过画布层级的属性设置来控制大屏的基本属性，例如宽度、高度、背景颜色等。

通常，图层层级和画布层级的位置和尺寸相同，可以通过切换图层的显示隐藏达到可视化场景的页面切换功能。

容器层级的JSON数据包含适配器，不包含子层级字段，容器层级通过适配器来创建图表，将适配器内的数据传给图表，从而实现不同的效果。具体地，可以通过解析JSON数据，并将数据传递给相应的图表，实现数据的展示和交互。

例如，如图3所示，画布层级位于最下层，图层层级叠加在画布层级上，容器层级叠加在图层层级上，容器层级包括4个角处的图表。

当图层层级切换时，其上显示的容器层级也随之不同，例如，图层层级1上设置有ab两个容器层级，图层层级2上设置有cd两个容器层级，那么当图层层级1显示时，大屏上显示的是ab两个容器层级，当切换到图层层级2时，大屏上显示的是cd两个容器层级。

应理解，UI层级为最高层级，层级关系从上往下依次为：UI层级>画布层级>图层层级>容器层级，层级关系在web中展示是相反的，最高层级在最下面展示，顺序为：容器层级>图层层级>画布层级>UI层级，web中上面层级的样式会覆盖下面层级的样式。

如图4所示，子节点在web中展示层级也是相反的，最前面的层级在最下层展示，如图4，子节点最前面的是外部矩形的容器层级，在web中最下层展示，内部矩形的容器层级在web中最上层展示。

S2，获取用户输入的属性值，根据属性值对画布层级和图层层级的属性进行设置；

例如，可以设置画布层级的宽度、高度、背景颜色等，图层层级通常默认与画布层级的位置和尺寸相同，本领域技术人员也可以根据实际需求对图层层级的位置和尺寸进行修改。

例如，假设可视化大屏的分辨率为1024*1024，那么画布图层的尺寸可以与可视化大屏的分辨率相同，图层层级的尺寸可以与画布图层相同，也可以设置为1000*1000，并根据实际需求设置图层层级在画布层级中的位置。

S3，通过容器层级的适配器创建图表，并通过适配器获取用户输入的图表数据，将图表数据传给图表进行展示。

例如，如图5所示，提供了示例性的图表展示效果示意图，图表可以为柱状图、条形图、折线图或曲线图等。

应理解，如图2所示，可以预先对JSON数据进行存储，例如，以可序列化方式存储可视化场景内容，当需要可视化展示时，读取序列化存储输出的系列化数据提供给可视化展示，当不需要可视化展示时，也可将可视化展示处理成序列化存储，最后，根据转换方法提供的序列化数据在web页面中渲染出来。

本实施例采用JSON数据的方式来控制web界面图表布局和交互，用户可以通过简单的操作和修改，快速地构建自定义的大屏展示效果，具有简单易用且效率高的优点，可以有效地提高大屏的定制化展示效果。

本实施例提供的大屏展示方案不需要用户具有编程能力和相关技术背景，具有简单方便易于操作的优点，此外，通过上述方式进行大屏显示，还解决了现有展示方案布局排版繁琐，易出现排版不够美观或不够灵活的问题，减轻了用户的工作量。

可选地，在一些可能的实施方式中，获取JSON数据之后，还包括：

根据JSON数据设置编组层级，编组层级在图层层级和容器层级之间展示；

其中，编组层级用于将至少一个容器层级组合在一起展示。

需要说明的是，当多个容器层级组合在一起后，形成了多个编组层级，还可以将多个编组层级组合在一起进行展示。

编组层级的级别高于容器层级，低于图层层级，因此，展示顺序为：容器层级>编组层级>图层层级>画布层级>UI层级。

现有的基于模板的大屏展示系统，用户只能在有限的模板场景下进行选择和修改，自定义功能较为受限制，影响了一些特殊需求的实现，而通过编组层级将多个容器层级组合在一起，可以简单的实现定制化的大屏展示，从而使显示效果不受模板限制，实用性更强。

可选地，在一些可能的实施方式中，获取用户输入的属性值，根据属性值对画布层级和图层层级的属性进行设置，具体包括：

通过UI层级获取用户输入的属性值，并将属性值传给画布层级和图层层级；

根据属性值设置画布层级的尺寸和背景颜色；

根据属性值设置图层层级相对于画布层级的位置和尺寸，并设置图层层级的数量。

可选地，在一些可能的实施方式中，还包括：

通过UI层级获取用户输入的操作指令，并将操作指令传给编组层级；

根据操作指令对编组层级的同一组合内的所有容器层级进行相同的操作。

编组层级允许将多个容器层级或编组层级组合在一起，从而可以方便地移动、旋转、放大或缩小其内部所有子层级。

可选地，在一些可能的实施方式中，UI层级的JSON数据包括UI类型、UI属性和UI子层级，其中，UI子层级为数组格式，包含画布层级的一个JSON数据；画布层级的JSON数据包括画布类型、画布属性和画布子层级，其中，画布子层级为数组格式，包含图层层级的至少一个JSON数据；图层层级的JSON数据包括图层类型、图层属性和图层子层级，其中，图层子层级为数组格式，包含编组层级的至少一个JSON数据；编组层级的JSON数据包括编组类型、编组属性和编组子层级，其中，编组子层级为数组格式，包含容器层级的至少一个JSON数据；容器层级的JSON数据包括容器类型、容器属性和适配器。

应理解，JSON数据包括类型（type）、属性（option）、适配器（adapter）、子层级（children）字段，适配器和子层级为互斥关系，同一层级只能存有一个。

需要说明的是，类型指的是该层级的类型，例如，可以是画布层级，属性指的是该层级的尺寸、颜色等信息。

本发明还提供一种基于JSON数据生成屏幕场景的系统，包括：

层级设置单元，用于获取JSON数据，根据JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，容器层级在最顶层；

属性设置单元，用于获取用户输入的属性值，根据属性值对画布层级和图层层级的属性进行设置；

图表展示单元，用于通过容器层级的适配器创建图表，并通过适配器获取用户输入的图表数据，将图表数据传给图表进行展示。

可选地，在一些可能的实施方式中，层级设置单元还用于根据JSON数据设置编组层级，编组层级在图层层级和容器层级之间展示；

其中，编组层级用于将至少一个容器层级组合在一起展示。

可选地，在一些可能的实施方式中，属性设置单元具体用于通过UI层级获取用户输入的属性值，并将属性值传给画布层级和图层层级；根据属性值设置画布层级的尺寸和背景颜色；根据属性值设置图层层级相对于画布层级的位置和尺寸，并设置图层层级的数量。

可选地，在一些可能的实施方式中，还包括：

层级控制单元，用于通过UI层级获取用户输入的操作指令，并将操作指令传给编组层级；根据操作指令对编组层级的同一组合内的所有容器层级进行相同的操作。

可选地，在一些可能的实施方式中，UI层级的JSON数据包括UI类型、UI属性和UI子层级，其中，UI子层级为数组格式，包含画布层级的一个JSON数据；画布层级的JSON数据包括画布类型、画布属性和画布子层级，其中，画布子层级为数组格式，包含图层层级的至少一个JSON数据；图层层级的JSON数据包括图层类型、图层属性和图层子层级，其中，图层子层级为数组格式，包含编组层级的至少一个JSON数据；编组层级的JSON数据包括编组类型、编组属性和编组子层级，其中，编组子层级为数组格式，包含容器层级的至少一个JSON数据；容器层级的JSON数据包括容器类型、容器属性和适配器。

应理解，上述实施方式为与在先方法实施方式对应的产品实施方式，关于产品实施方式的说明可以参考在先方法实施方式的说明，在此不再赘述。

应理解，在不违背本发明构思的前提下，本领域技术人员可以将上述实施方式进行任意组合，均在本发明的保护范围内。

读者应理解，在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的方法实施例仅仅是示意性的，例如，步骤的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个步骤可以结合或者可以集成到另一个步骤，或一些特征可以忽略，或不执行。

上述方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，RandomAccessMemory）、磁碟或者光盘等各种可以存储程序代码的介质。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (6)

1.一种基于JSON数据生成屏幕场景的方法，其特征在于，包括：

获取JSON数据，根据所述JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，所述容器层级在最顶层；

获取用户输入的属性值，根据所述属性值对所述画布层级和所述图层层级的属性进行设置；

通过所述容器层级的适配器创建图表，并通过所述适配器获取用户输入的图表数据，将所述图表数据传给所述图表进行展示；

获取JSON数据之后，还包括：

根据所述JSON数据设置编组层级，所述编组层级在所述图层层级和所述容器层级之间展示；

其中，所述编组层级用于将至少一个容器层级组合在一起展示；

所述UI层级的JSON数据包括UI类型、UI属性和UI子层级，其中，UI子层级为数组格式，包含画布层级的一个JSON数据；所述画布层级的JSON数据包括画布类型、画布属性和画布子层级，其中，所述画布子层级为数组格式，包含图层层级的至少一个JSON数据；所述图层层级的JSON数据包括图层类型、图层属性和图层子层级，其中，所述图层子层级为数组格式，包含编组层级的至少一个JSON数据；所述编组层级的JSON数据包括编组类型、编组属性和编组子层级，其中，所述编组子层级为数组格式，包含容器层级的至少一个JSON数据；所述容器层级的JSON数据包括容器类型、容器属性和适配器。

2.根据权利要求1所述的基于JSON数据生成屏幕场景的方法，其特征在于，获取用户输入的属性值，根据所述属性值对所述画布层级和所述图层层级的属性进行设置，具体包括：

通过所述UI层级获取用户输入的属性值，并将所述属性值传给所述画布层级和所述图层层级；

根据所述属性值设置所述画布层级的尺寸和背景颜色；

根据所述属性值设置所述图层层级相对于所述画布层级的位置和尺寸，并设置图层层级的数量。

3.根据权利要求1所述的基于JSON数据生成屏幕场景的方法，其特征在于，还包括：

通过所述UI层级获取用户输入的操作指令，并将所述操作指令传给所述编组层级；

根据所述操作指令对所述编组层级的同一组合内的所有容器层级进行相同的操作。

4.一种基于JSON数据生成屏幕场景的系统，其特征在于，包括：

层级设置单元，用于获取JSON数据，根据所述JSON数据设置依次展示的UI层级、画布层级、图层层级和容器层级，所述容器层级在最顶层；

属性设置单元，用于获取用户输入的属性值，根据所述属性值对所述画布层级和所述图层层级的属性进行设置；

图表展示单元，用于通过所述容器层级的适配器创建图表，并通过所述适配器获取用户输入的图表数据，将所述图表数据传给所述图表进行展示；

所述层级设置单元还用于根据所述JSON数据设置编组层级，所述编组层级在所述图层层级和所述容器层级之间展示；

其中，所述编组层级用于将至少一个容器层级组合在一起展示；

所述UI层级的JSON数据包括UI类型、UI属性和UI子层级，其中，UI子层级为数组格式，包含画布层级的一个JSON数据；所述画布层级的JSON数据包括画布类型、画布属性和画布子层级，其中，所述画布子层级为数组格式，包含图层层级的至少一个JSON数据；所述图层层级的JSON数据包括图层类型、图层属性和图层子层级，其中，所述图层子层级为数组格式，包含编组层级的至少一个JSON数据；所述编组层级的JSON数据包括编组类型、编组属性和编组子层级，其中，所述编组子层级为数组格式，包含容器层级的至少一个JSON数据；所述容器层级的JSON数据包括容器类型、容器属性和适配器。

5.根据权利要求4所述的基于JSON数据生成屏幕场景的系统，其特征在于，所述属性设置单元具体用于通过所述UI层级获取用户输入的属性值，并将所述属性值传给所述画布层级和所述图层层级；根据所述属性值设置所述画布层级的尺寸和背景颜色；根据所述属性值设置所述图层层级相对于所述画布层级的位置和尺寸，并设置图层层级的数量。

6.根据权利要求4所述的基于JSON数据生成屏幕场景的系统，其特征在于，还包括：

层级控制单元，用于通过所述UI层级获取用户输入的操作指令，并将所述操作指令传给所述编组层级；根据所述操作指令对所述编组层级的同一组合内的所有容器层级进行相同的操作。