CN114398034A - 一种可视化数据显示方法、装置和可读介质 - Google Patents
一种可视化数据显示方法、装置和可读介质 Download PDFInfo
- Publication number
- CN114398034A CN114398034A CN202111386607.4A CN202111386607A CN114398034A CN 114398034 A CN114398034 A CN 114398034A CN 202111386607 A CN202111386607 A CN 202111386607A CN 114398034 A CN114398034 A CN 114398034A
- Authority
- CN
- China
- Prior art keywords
- area
- rendering
- template
- parameters
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例公开了一种可视化数据显示方法、装置及可读介质,所述方法应用于WEB页面,所述WEB页面包括第一区域、第二区域以及第三区域;所示方法包括,以监听所述第一区域的用于选择可视化模板的选择操作为触发,确定与所述选择操作对应的模板配置文件;依据所述模板配置文件渲染可视化数据,并在所述第二区域中显示所述可视化数据;基于所述模板配置文件确定属性面板渲染参数;依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显示所述属性面板;建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组件参数改动时能够影响所述可视化数据的显示效果。
Description
技术领域
本申请涉及计算机领域,尤其涉及一种可视化数据显示方法、装置和可读介质。
背景技术
目前,利用开源的ECharts图表库,能够在Web页面上展示可视化图表。ECharts是JavaScript开源库,目前很多可视化图表采用此库进行图表开发。
图1是现有技术中,利用EChart图表库展示可视化数据的界面示意图。从图1中可以 看出,目前的成熟技术中,页面分为两个区域,区域11是代码区域,区域12是展示区域。当用户需要修改展示区域中的各种展示效果时,需要将代码区域中的代码,然后对代码进行编译后才能够改变展示区域中所显示的内容。
为了解决现有技术所存在的缺陷,另一现有技术中,如图2所示,图2是现 有技术中,利用EChart图表库展示可视化数据的另一种界面示意图,区域21不 显示代码而显示可视化模板,如图2的区域21中示出的基础柱状图、基础条形 图、柱状堆叠图、逆向条形图、条形堆叠图、百分比柱状堆叠图、百分比条形堆 叠图等可视化模板,用户可以根据需要选择可视化模板,在区域22中显示可视 化模板对应的内容。
但是,此种方式如果需要修改某一属性,例如标题,则需要定制化修改模板。
可见,现有的可视化数据显示方法需要修改展示效果时,学习成本高,操作复杂。
发明内容
有鉴于此,本说明书实施例提供一种可视化数据显示方法、装置和可读介质,以在对 可视化数据的显示效果进行修改时,能够降低学习成本,提高操作效率。
为解决上述技术问题,本说明书实施例是这样实现的:
本发明实施例提供了一种可视化数据显示方法,应用于WEB页面,所述WEB页面包括第一区域、第二区域以及第三区域;所示方法包括:
以监听所述第一区域的用于选择可视化模板的选择操作为触发,确定与所述选择操作 对应的模板配置文件;
依据所述模板配置文件渲染可视化数据,并在所述第二区域中显示所述可视化数据;
基于所述模板配置文件确定属性面板渲染参数;
依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显示所述属性面板;
建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组件参数 改动时能够影响所述可视化数据的显示效果。
在一些实施例中,所述方法还包括:
接收对所述属性面板中组件的组件参数进行修改的修改操作;
基于所述修改操作,确定所述模板配置文件中与所述组件参数对应的模板参数;
将所述模板参数修改为所述组件参数;
基于更新后的所述组件参数刷新所述可视化数据。
在一些实施例中,所述页面还包括第四区域,所述方法还包括:
确定所述可视化数据对应的可修改参数;
基于所述可修改参数在所述第四区域中显示可修改参数表格。
在一些实施例中,所述方法还包括:
基于更新后的所述组件参数刷新所述可修改参数表格。
在一些实施例中,所述第四区域还包括代码第一子区域,所述代码第一子区域用于显 示所述可修改参数表格对应的代码。
在一些实施例中,还包括:
接收对所述代码的修改操作;
基于修改后的代码,更新所述可视化数据。
在一些实施例中,所述基于修改后的代码,更新所述可视化数据具体包括:
调用所述目标配置文件对应的实例接口,将所述代码渲染为可视化图表。
在一些实施例中,所述基于所述模板配置文件确定属性面板渲染参数具体包括:
提取所述模板配置文件对应的代码特征;
基于所代码特征确定与所述代码特征中控件类型相匹配的目标组件;
至少将所述模板配置文件对应的渲染样式以及所述目标组件的组件类型、组件参数作 为所述属性面板渲染参数。
本发明实施例另一方面提供了一种可视化数据显示装置,应用于WEB页面,所述WEB 页面包括第一区域、第二区域以及第三区域;所示装置包括:
触发模块,用于以监听所述第一区域的用于选择可视化模板的选择操作为触发,确定 与所述选择操作对应的模板配置文件;
第一渲染模块,用于依据所述模板配置文件渲染可视化数据,并在所述第二区域中显 示所述可视化数据;
参数确定模块,用于基于所述模板配置文件确定属性面板渲染参数;
第二渲染模块,用于依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显 示所述属性面板;
关联模块,用于建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述 组件的组件参数改动时能够影响所述可视化数据的显示效果。
本发明实施例另一方面还提供了一种计算机可读介质,其上存储有计算机可读指令, 所述计算机可读指令可被处理器执行以实现上述所述的可视化数据显示方法
本说明书一个实施例至少能够达到以下有益效果:在对可视化数据的显示效果进行修 改时,可以通过实时生成的属性面板就能够实现相应的操作,能够降低学习成本,提高操 作效率。
附图说明
为了更清楚地说明本说明书实施例或现有技术中的技术方案,下面将对实施例或现有 技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申 请中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下, 还可以根据这些附图获得其他的附图。
图1是现有技术中,利用EChart图表库展示可视化数据的界面示意图。
图2是现有技术中,利用EChart图表库展示可视化数据的另一种界面示意图。
图3是本发明实施例提供的一种可视化数据显示方法的流程示意图。
图4是本发明实施例中提供的一种可视化数据显示方法的界面示意图。
图5为本发明实施例中一种可视化数据显示方法的另一种界面示意图。
图6为本说明书实施例提供的对应于图3的一种可视化数据显示装置的结构示意图。
具体实施方式
为了便于理解,对发明实施例中可能用到的名称进行解释。
1)组件:可视化网页应用中可配置的最小单元
2)可配置属性:组件向外暴露出的可调整、可配置参数的集合。
3)数据特征:基于数据类型的特征,如整形,浮点,字符串,哈希表,列表等。
4)echarts图表库:apache基金会维护的开源图表库。
基于现有技术中所存的问题,本发明实施例公开了一种可视化数据显示方法。
图3是本发明实施例提供的一种可视化数据显示方法的流程示意图。
本发明实施例公开了一种可视化数据显示方法,应用于WEB页面,所述WEB页面包括第一区域、第二区域以及第三区域;
本发明实施例中,应用在Web页面,其中Web页面可以是指Web应用中所包括的页面。与现有技术不同的,本发明实施例中,Web页面中能够包括至少三个区域,如图4,图 4是本发明实施例中一种可视化数据显示方法的界面示意图。其中,第一区域41、第二区 域42、第三区域43能够组成上述Web页面的显示界面。
其中,第一区域用于显示可视化模板。可视化模板为能够预先配置的模板,能够依据 该模板渲染出与该模板的配置文件相匹配的可视化数据显示在第二区域中。第三区域用于 展示属性面板,属性面板中包括有多个组件,可以通过配置组件的组件参数来影响第二区 域中可视化数据的显示内容。例如,第三区域中有文本组件,该文本组件的组件参数为标 题,对应第二区域中所显示的“标题”。当修改该文本组件为第一标题时,能够使得第二 区域中的显示的“标题”更新为“第一标题”。具体过程在后续进行详细介绍。
与现有技术不同的,第三区域中所显示的属性面板,是根据第二区域中所显示的可视 化数据进行实时生成的,而并不是固定配置好的。该属性面板的样式、颜色等均可以根据 第二区域中的可视化数据不同而不同。
所示方法包括:
S100、以监听所述第一区域的用于选择可视化模板的选择操作为触发,确定与所述选 择操作对应的模板配置文件;
本发明实施例中,可以由用户或其他能够执行选择操作的程序来执行选择操作。当监 听到上述选择操作时,确定该选择操作对应的模板配置文件。
其中,选择操作可以是在第一区域中的选定操作,来选定第一区域中所显示的可视化 模板。选择操作可以是触摸操作也可以是
可视化模板具体可以包括采用不同类型进行分类展示的模板。类型可以包括行业类型、 展示类型等。在第一区域中可以展示多个不同类型的可视化模板。每一可视化模板能够有 各自对应的模板配置文件。
其中,模板配置文件中可以包括可视化模板对应的可执行代码。可执行代码可以为 JSON数据,能够通过对JSON数据的渲染来展示可视化数据。可视化数据例如可视化表格、 可视化3D模型等。
本发明实施例中,可以预先配置每一可视化模板对应的模板配置文件的对应关系,可 以通过该对应关系查找到该可视化模板的模板配置文件。
本发明实施例中,监听可以为Web应用的一个具体组件或插件,能够实现监听功能。 还可以是触发器等能够实现该监听功能的应用程序或调用具有监听功能的接口来实现该监 听功能。
S200、依据所述模板配置文件渲染可视化数据,并在所述第二区域中显示所述可视化 数据;
本发明实施例中,能够依据JSON数据渲染可视化数据,可视化数据具体为可视化表 格、可视化3D模型。
第二区域中,当确定了模板配置文件后,能够即可执行渲染操作,可以具体包括:根 据所述模板配置文件中JSON数据的格式,确定可视化数据的呈现形式,所述呈现形式包括:3D模型形式、图表形式。基于该呈现形式调用具有渲染功能的处理装置对模板配置文件中的JSON数据进行读取,并渲染出可视化数据,显示在所述第二区域中。
可以理解的是,这一过程根据硬件资源的性能决定显示出可视化数据的时长。通常会 在选定可视化模板后的1s内在第二区域显示可视化数据。
S300、基于所述模板配置文件确定属性面板渲染参数;
S400、依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显示所述属性面 板;
在步骤300中,与渲染可视化数据同时触发的还有确定属性面板渲染参数的过程。
其中,属性面板渲染参数为用于渲染属性面板的JSON数据。
本发明实施例中,可以直接预先设置与可视化模板对应的属性面板,但是,此种方式 不够灵活,无法对属性面板中的各项参数以及所能够展示内容的增加、删除、修改等操作。 因此,本发明实施例中,是在渲染可视化数据的同时实时确定出属性面板渲染参数。
可以根据模板配置文件来确定出属性面板渲染参数。
本发明实施例中,所述基于所述模板配置文件确定属性面板渲染参数具体包括:
提取所述模板配置文件对应的代码特征;
基于所代码特征确定与所述代码特征中控件类型相匹配的目标组件;
至少将所述模板配置文件对应的渲染样式以及所述目标组件的组件类型、组件参数作 为所述属性面板渲染参数。
本发明实施例中,可以先提取模板配置文件的代码特征,然后依据该代码特征来确定 出所需调用的目标组件,根据模板配置文件对应的渲染样式和目标组件的属性如组件类似、 组件参数等来确定出属性面板渲染参数。
其中,代码特征可以包括组件的键名、键值、数据类型等与组件相关的属性参数。
可以理解的是,本发明实施例中,基于模板配置文件,实时提取其中可用做属性面板 渲染参数的JSON数据,然后基于该JSON数据来确定出属性面板渲染参数。
当然,还可以通过附加的字典进行配置,使得自动生成的属性面板可以具有更复杂的 个性化编辑能力。
确定了属性面板渲染参数后,执行渲染过程,在第三区域中显示属性面板。
本发明实施例中,能够实时的渲染出属性面板,能够基于该属性面板对第二区域中的 可视化数据进行改动。
S500、建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组 件参数改动时能够影响所述可视化数据的显示效果。
本发明实施例中,建立属性面板中的各个组件与可视化数据中各个显示项目的关联关 系。其中,由于关联关系的存在,使得组件的组件参数改动时,可视化数据的显示效果也 能够进行更新。
可以理解的是,建立关联关系可以是根据通过模板配置文件中的字段进行建立的。当 组件的组件参数改动时,可以触发模板配置文件对应的代码的改动,从而触发更新过程, 实时刷新第二区域中的可视化数据,实现联动的效果。
属性面板中,可以具有增加或删除属性的按钮,例如增加标题、删除X轴中的A数据。 可以与第二区域中的可视化数据具有对应关系,实时更新。
并且,由于属性面板是根据第二区域中的可视化数据实时渲染生成的,因此,当通过 改变第二区域中可视化数据对应的代码或直接在该可视化数据例如图表中进行改写时,还 能够实时更新属性面板中与该改写的参数对应的组件的组件参数。
本发明实施例中,可以实现第二区域中的可视化数据与第三区域中属性面板的联动。
从上述实施例可以看出,本发明实施例中,以监听所述第一区域的用于选择可视化模 板的选择操作为触发,确定与所述选择操作对应的模板配置文件;依据所述模板配置文件 渲染可视化数据,并在所述第二区域中显示所述可视化数据;基于所述模板配置文件确定 属性面板渲染参数;依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显示所 述属性面板;建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的 组件参数改动时能够影响所述可视化数据的显示效果。在对可视化数据的显示效果进行修 改时,可以通过实时生成的属性面板就能够实现相应的操作,能够降低学习成本,提高操 作效率。
基于前述实施例,本发明实施例中,所述方法还包括:
接收对所述属性面板中组件的组件参数进行修改的修改操作;
基于所述修改操作,确定所述模板配置文件中与所述组件参数对应的模板参数;
将所述模板参数修改为所述组件参数;
基于更新后的所述组件参数刷新所述可视化数据。
本发明实施例中,当接收到对第三区域中的属性面板的组件的组件参数进行修改的操 作时,能够根据关联关系对应确定出模板配置文件中的模板参数,然后对该模板参数进行 更新,刷新可视化数据。实现联动。
当然,根据前述实施例的介绍可知,还可以是通过对可视化数据的修改来对应更新属 性面板的组件的组件参数。
本发明实施例中,由于实时渲染出了属性面板,因此,可以通过属性面板就可以直接 对可视化数据中所显示的内容进行更新,提高了操作效率。
图5为本发明实施例中一种可视化数据显示方法的另一种界面示意图。
在上述实施例的基础上,本发明实施例中,页面中还包括有第四区域50,第四区域包 括第一子区域501和第二子区域502。
所述页面还包括第四区域,所述方法还包括:
确定所述可视化数据对应的可修改参数;
基于所述可修改参数在所述第四区域中显示可修改参数表格。
所述方法还包括:
基于更新后的所述组件参数刷新所述可修改参数表格。
所述第四区域还包括代码第一子区域,所述代码第一子区域用于显示所述可修改参数 表格对应的代码。
在一些实施例中,还包括:
接收对所述代码的修改操作;
基于修改后的代码,更新所述可视化数据。
在一些实施例中,所述基于修改后的代码,更新所述可视化数据具体包括:
调用所述目标配置文件对应的实例接口,将所述代码渲染为可视化图表。
本发明实例中,还包括有第四区域。其中,第四区域可以包括两个子区域,第一子区 域和第二子区域。其中,第一子区域能够展示所述可视化数据对应的代码,第二子区域可 以采用图表的方式展示所述可视化数据的元素,例如,可视化数据为图表,X轴为a、b、c三个元素,Y轴为0-100的数值,a的值为50,b的值为30,c的值为20,则第二子区域中 能够显示出X轴的各个元素下所对应的Y轴的数值。
当对该可修改参数表格进行修改时,能够实时更新第一子区域中的代码,且能够实时 属性第二区域中可视化数据所展示的内容。
本发明实施例中,可以通过模板配置文件的实例配置信息和数据通过JavaScript调用该 实例的接口setOption来实现第一子区域中代码的渲染。所述实例配置信息为基于echarts 的实例配置信息。
本发明实施例中,由于操作第一子区域代码的同时,能够影响第二区域中可视化数据 的变更。这样,当代码开发人员和界面设计人员同时开发项目时,能够同时编辑第二区域 中的第二可视化数据,大幅度提高了属性变更的灵活性,降低了产品迭代的周期。
在一些实施例中,在采用了上述实施例的方式生成属性面板后,只需要增加属性,对 应属性的编辑行自动就会出现在编辑面板上。实现了自动生成配置面板。另外,还可以在 针对上架下架属性的时候依赖于单一配置文件,接入后台接口后实现管理中心管理上下架 调整。可操作性强。
基于同样的思路,本说明书实施例还提供了上述方法对应的装置。图6为本说明书实 施例提供的对应于图3的一种可视化数据显示装置的结构示意图。如图6所示,所示装置应用于WEB页面,所述WEB页面包括第一区域、第二区域以及第三区域;该装置可以包 括:
触发模块61,用于以监听所述第一区域的用于选择可视化模板的选择操作为触发,确 定与所述选择操作对应的模板配置文件;
第一渲染模块62,用于依据所述模板配置文件渲染可视化数据,并在所述第二区域中 显示所述可视化数据;
参数确定模块63,用于基于所述模板配置文件确定属性面板渲染参数;
第二渲染模块64,用于依据所述属性面板渲染参数渲染显示面板,并在所述第三区域 显示所述属性面板;
关联模块65,用于建立所述属性面板中组件与所述可视化数据的关联关系;其中,所 述组件的组件参数改动时能够影响所述可视化数据的显示效果。
可以理解,上述的各模块是指计算机程序或者程序段,用于执行某一项或多项特定的 功能。此外,上述各模块的区分并不代表实际的程序代码也必须是分开的。
基于同样的思路,本说明书实施例还提供了上述方法对应的设备。
电子设备可以包括:
至少一个处理器;以及,
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处 理器执行,以使所述至少一个处理器能够:
以监听WEB页面的第一区域的用于选择可视化模板的选择操作为触发,确定与所述选 择操作对应的模板配置文件;
依据所述模板配置文件渲染可视化数据,并在所述WEB页面的第二区域中显示所述可 视化数据;
基于所述模板配置文件确定属性面板渲染参数;
依据所述属性面板渲染参数渲染显示面板,并在所述WEB页面的第三区域显示所述属 性面板;
建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组件参数 改动时能够影响所述可视化数据的显示效果。
基于同样的思路,本说明书实施例还提供了上述方法对应的计算机可读介质。计算机 可读介质上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现以下方法:
以监听WEB页面的第一区域的用于选择可视化模板的选择操作为触发,确定与所述选 择操作对应的模板配置文件;
依据所述模板配置文件渲染可视化数据,并在所述WEB页面的第二区域中显示所述可 视化数据;
基于所述模板配置文件确定属性面板渲染参数;
依据所述属性面板渲染参数渲染显示面板,并在所述WEB页面的第三区域显示所述属 性面板;
建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组件参数 改动时能够影响所述可视化数据的显示效果。
上述对本说明书特定实施例进行了描述,在一些情况下,在权利要求书中记载的动作 或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附 图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实 施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互 相参见即可。
本说明书实施例提供的装置、电子设备与方法是对应的,因此,装置、电子设备也具 有与对应方法类似的有益技术效果,由于上面已经对方法的有益技术效果进行了详细说明, 因此,这里不再赘述对应装置、设备的有益技术效果。
在20世纪90年代,对于一个技术的改进可以很明显地区分是硬件上的改进(例如,对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。 然而,随着技术的发展,当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。 因此,不能说一个方法流程的改进就不能用硬件实体模块来实现。例如,可编程逻辑器件 (Programmable Logic Device,PLD)(例如现场可编程门阵列(Field ProgrammableGate Array,FPGA))就是这样一种集成电路,其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字符系统“集成”在一片PLD上,而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且,如今,取代手工地制作集成电路芯片,这种编程也多 半改用“逻辑编译器(logic compiler)”软件来实现,它与程序开发撰写时所用的软件编译器相类似,而要编译之前的原始代码也得用特定的编程语言来撰写,此称之为硬件描述语言(Hardware Description Language,HDL),而HDL也并非仅有一种,而是有许多种,如 ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等,目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚,只需要将 方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中,就可以很容易得到 实现该逻辑方法流程的硬件电路。
控制器可以按任何适当的方式实现,例如,控制器可以采取例如微处理器或处理器以 及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读 介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit,ASIC)、可 编程逻辑控制器和嵌入微控制器的形式,控制器的例子包括但不限于以下微控制器:ARC 625D、AtmelAT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320,存储器控 制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道,除了以纯计算 机可读程序代码方式实现控制器以外,完全可以通过将方法步骤进行逻辑编程来使得控制 器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相 同功能。因此这种控制器可以被认为是一种硬件部件,而对其内包括的用于实现各种功能 的装置也可以视为硬件部件内的结构。或者甚至,可以将用于实现各种功能的装置视为既 可以是实现方法的软件模块又可以是硬件部件内的结构。
上述实施例阐明的系统、装置、模块或单元,具体可以由计算机芯片或实体实现,或 者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的,计算机例如可 以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备 中的任何设备的组合。
为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本申 请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产 品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程 序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图 和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流 程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式 工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置 的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方 框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机 或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他 可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方 框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非 易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技 术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计 算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、 电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存 储器(CD-ROM)、数字符多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带式磁 盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信 息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如 调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含, 从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没 有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。 在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素 的过程、方法、商品或者设备中还存在另外的相同要素。
本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。 一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、 数据结构等等。也可以在分布式计算环境中实践本申请,在这些分布式计算环境中,由通 过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位 于包括存储设备在内的本地和远程计算机存储介质中。
以上所述仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说, 本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、 改进等,均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种可视化数据显示方法,其特征在于,应用于WEB页面,所述WEB页面包括第一区域、第二区域以及第三区域;所述方法包括:
以监听所述第一区域的用于选择可视化模板的选择操作为触发,确定与所述选择操作对应的模板配置文件;
依据所述模板配置文件渲染可视化数据,并在所述第二区域中显示所述可视化数据;
基于所述模板配置文件确定属性面板渲染参数;
依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显示所述属性面板;
建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组件参数改动时能够影响所述可视化数据的显示效果。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
接收对所述属性面板中组件的组件参数进行修改的修改操作;
基于所述修改操作,确定所述模板配置文件中与所述组件参数对应的模板参数;
将所述模板参数修改为所述组件参数;
基于更新后的所述组件参数刷新所述可视化数据。
3.根据权利要求2所述的方法,其特征在于,所述页面还包括第四区域,所述方法还包括:
确定所述可视化数据对应的可修改参数;
基于所述可修改参数在所述第四区域中显示可修改参数表格。
4.根据权利要求3所述的方法,其特征在于,所述方法还包括:
基于更新后的所述组件参数刷新所述可修改参数表格。
5.根据权利要求3所述的方法,其特征在于,所述第四区域还包括代码第一子区域,所述代码第一子区域用于显示所述可修改参数表格对应的代码。
6.根据权利要求5所述的方法,其特征在于,还包括:
接收对所述代码的修改操作;
基于修改后的代码,更新所述可视化数据。
7.根据权利要求6所述的方法,其特征在于,所述基于修改后的代码,更新所述可视化数据具体包括:
调用所述目标配置文件对应的实例接口,将所述代码渲染为可视化图表。
8.根据权利要求1至7任意一项所述的方法,其特征在于,所述基于所述模板配置文件确定属性面板渲染参数具体包括:
提取所述模板配置文件对应的代码特征;
基于所代码特征确定与所述代码特征中控件类型相匹配的目标组件;
至少将所述模板配置文件对应的渲染样式以及所述目标组件的组件类型、组件参数作为所述属性面板渲染参数。
9.一种可视化数据显示装置,其特征在于,应用于WEB页面,所述WEB页面包括第一区域、第二区域以及第三区域;所示装置包括:
触发模块,用于以监听所述第一区域的用于选择可视化模板的选择操作为触发,确定与所述选择操作对应的模板配置文件;
第一渲染模块,用于依据所述模板配置文件渲染可视化数据,并在所述第二区域中显示所述可视化数据;
参数确定模块,用于基于所述模板配置文件确定属性面板渲染参数;
第二渲染模块,用于依据所述属性面板渲染参数渲染显示面板,并在所述第三区域显示所述属性面板;
关联模块,用于建立所述属性面板中组件与所述可视化数据的关联关系;其中,所述组件的组件参数改动时能够影响所述可视化数据的显示效果。
10.一种计算机可读介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现权利要求1至8中任一项所述的可视化数据显示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111386607.4A CN114398034A (zh) | 2021-11-22 | 2021-11-22 | 一种可视化数据显示方法、装置和可读介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111386607.4A CN114398034A (zh) | 2021-11-22 | 2021-11-22 | 一种可视化数据显示方法、装置和可读介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114398034A true CN114398034A (zh) | 2022-04-26 |
Family
ID=81225554
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111386607.4A Pending CN114398034A (zh) | 2021-11-22 | 2021-11-22 | 一种可视化数据显示方法、装置和可读介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114398034A (zh) |
-
2021
- 2021-11-22 CN CN202111386607.4A patent/CN114398034A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US5611031A (en) | Graphical user interface for modifying object characteristics using coupon objects | |
CN111796821A (zh) | 一种页面更新的方法及装置 | |
CN114115643A (zh) | 一种组件显示方法、装置、电子设备和可读介质 | |
CN108614693B (zh) | 一种针对页面组件的处理方法、装置及设备 | |
US9286270B2 (en) | Simultaneously displaying multiple related documents in a logically hierarchical manner | |
CN112528614A (zh) | 一种表格编辑方法、装置和电子设备 | |
US20230384766A1 (en) | Information processing apparatus, ladder-program generation apparatus, information processing method, ladder-program generation method, method of manufacturing product, and recording medium | |
CN114398034A (zh) | 一种可视化数据显示方法、装置和可读介质 | |
CN116245051A (zh) | 一种仿真软件渲染方法、装置、存储介质及电子设备 | |
CN113360154A (zh) | 一种页面构建方法、装置、设备和可读介质 | |
CN115113872A (zh) | 一种界面元素排布的控制方法、装置和存储介质 | |
CN113986176A (zh) | 一种颜色显示方法、装置、电子设备和可读介质 | |
CN112732252A (zh) | 一种动态生成ui的方法、装置和电子设备 | |
CN114283268A (zh) | 一种三维模型处理方法、装置、设备及介质 | |
JPH01240978A (ja) | 対話画面定義装置 | |
CN111736820A (zh) | 一种可视化程序开发方法及装置 | |
CN108920241B (zh) | 一种显示状态调整方法、装置及设备 | |
CN114003226A (zh) | 一种分层分布式图形设计系统 | |
CN114115845A (zh) | 一种项目生成方法、装置、电子设备和可读介质 | |
CN108563412B (zh) | 一种数值变化展示方法及装置 | |
CN112000329A (zh) | 一种数据展示方法、装置、设备及介质 | |
CN107783761B (zh) | 一种界面构建方法、装置及设备 | |
CN113391868A (zh) | 一种页面信息显示方法、装置、设备和可读介质 | |
CN114063944A (zh) | 一种颜色展示方法、装置、电子设备和可读介质 | |
CN112579222A (zh) | 页面信息的显示方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
TA01 | Transfer of patent application right | ||
TA01 | Transfer of patent application right |
Effective date of registration: 20220713 Address after: 100190 Beijing Haidian District Zhichun Road 49 No. 3 West 309 Applicant after: TENCENT CLOUD COMPUTING (BEIJING) Co.,Ltd. Address before: 100102 Room 203, 14 and 19, floor 2, building 19, Wangjing Dongyuan seventh district, Chaoyang District, Beijing Applicant before: Beijing Guangqiyuan Digital Technology Co.,Ltd. |