CN115249285A - 可视化视图的构建方法及装置 - Google Patents

Abstract

本申请提供了一种可视化视图的构建方法及装置，属于计算机技术领域。本申请在构建嵌套图表的可视化视图时，将子图表视为父图表绑定的图符，使用父图表的坐标轴属性来控制子图表的布局，从而将复杂图表在逻辑上拆分为简单图表的嵌套组合，使得复杂图表的逻辑结构清晰化。尤其是，在父图表包含大量子图表的场景下，利用父图表的坐标轴属性有助于批量化地获得所有子图表的布局，而无需开发者为每个子图表单个计算和配置，因此显著地简化了可视化构建流程，提高了可视化构建效率，降低使用门槛。

Description

可视化视图的构建方法及装置

技术领域

本申请涉及计算机技术领域，特别涉及一种可视化视图的构建方法及装置。

背景技术

嵌套图表是指不同图表相互嵌套而成的图表。嵌套图表的形式是，一个大图表里包含至少一个相同或相关类型的小图表，这些小图表在大图表中按照某种布局参数进行排列展示。例如，日历图是一个典型的嵌套图表，表示一年的日历图包含12个月份的第二图表，每个第二图表展示一个月中各个日期的数据。

为了构建嵌套图表的可视化视图，相关技术中，开发人员要为嵌套图表中每个小图表手动地计算位置、旋转角度等布局参数相关的参数。并且，开发者要为每个小图表分别编写用于配置计算出的布局参数相关的参数的代码，在计算机上输入编写的代码。计算机根据开发者编写的代码进行绘制、渲染等操作，从而显示嵌套图表。

上述方法依赖的代码量巨大，导致效率低下。尤其是，在构建small multiple(小而多)形式的嵌套图表的场景下，嵌套图表中包含众多小图表，开发者需要为众多小图表的布局参数分别进行计算和配置，造成过程繁琐复杂，效率低下的问题更是十分严重。

发明内容

本申请实施例提供了一种可视化视图的构建方法及装置，有助于提高对复杂嵌套图表进行可视化的效率。所述技术方案如下。

第一方面，提供了一种可视化视图的构建方法，该方法包括：接收构建请求，构建请求指示构建第一图表的可视化视图，第一图表绑定的图符包括第二图表；根据第一图表的坐标轴属性，获取第二图表的第一布局参数；根据第一布局参数，获取第一图表的可视化视图，可视化视图包括第一图表和第二图表，可视化视图中第二图表按照第一布局参数排列；提供可视化视图。

上述方法中，通过在构建嵌套图表的可视化视图时，将子图表视为父图表绑定的图符，使用父图表的坐标轴属性来控制子图表的布局，从而将复杂图表在逻辑上拆分为简单图表的嵌套组合，使得复杂图表的逻辑结构清晰化。尤其是，在父图表包含大量子图表的场景下，利用父图表的坐标轴属性有助于批量化地获得所有子图表的布局，而无需开发者为每个子图表单个计算和配置，因此显著地简化了可视化构建流程，提高了可视化构建效率，降低使用门槛。

在一些实施例中，支持在父图表的坐标轴属性对应的位置的基础上进一步调优，从而得到更加精确的子图表的位置，也即是，上述第一布局参数是以坐标轴属性对应的布局参数为基准调整得到的。具体来说，在获取第一布局参数的过程中，根据第一图表的坐标轴属性，获取第二图表的基准布局参数；对基准布局参数进行调整，得到第一布局参数。

通过这种方式，不仅依靠坐标轴简化了布局流程，而且不局限于基于坐标轴的布局方式。具体来说，一方面，通过对基准位置进行调整能实现更加精细的布局，从而提升可视化的构建效果。另一方面，相比于从零开始计算布局来说，由于基准位置为布局的计算提供了参考量，降低了计算布局的复杂度。

如何基于父图表的坐标轴属性所定义的基准位置做调整包括多种实现方式，下面结合两种实现方式举例说明。

实现方式一、根据第二图表的位置坐标、位移或角度，对基准布局参数进行调整，得到第一布局参数。

通过实现方式一，允许用户通过改变类型为图表的图符(第二图表，即子图表)自身的属性来调整基准布局，有助于各个子图表的布局更加精确。

实现方式二、根据第一图表的力引导属性，对基准布局参数进行调整，得到第一布局参数。

通过实现方式二，对于气泡图(bubble chart)，或者其他包含大量子图表或者不同子图表分布密集的图表来说，根据坐标轴属性计算出的基准位置可能造成子图表重叠，此时通过上述实现方式二，额外设置力引导布局属性，能让每个子图表相切，从而达到不同子图表互不重叠的效果。

以上通过两种方式介绍了如何对基准位置做调整。可替代地，采用其他方式进行位置调整。例如，预先设定用于调整位置的计算规则，对更加复杂的调整场景时，向用户提供预先设定的计算规则从而辅助用户调整位置。

在一些实施例中，在子图表中包含图符的情况下，根据图符在子图表中的位置和子图表在父图表中的位置，获取子图表中图符的位置。例如，第二图表绑定的图符包括第三图表，根据第一布局参数，获取第一图表的可视化视图，包括：根据第三图表在第二图表中的位置和第二图表在第一图表中的位置，获取第三图表在可视化视图中的位置。

通过上述方式，在嵌套图表包含两层以上嵌套关系的情况下，能够准确计算出更底层图表的布局，从而支持复杂嵌套图表的可视化效果。

在一些实施例中，支持采用多种方式修改可视化视图中图表的布局。下面，对实现图表布局修改的一些可能实现方式举例说明，请见下述实现方式A至实现方式C。

实现方式A、通过修改父图表的坐标轴属性来修改子图表的布局。例如，响应于第一更新指令，对第一图表的坐标轴属性进行更新；根据第一图表更新后的坐标轴属性，获取第二图表的第二布局参数；根据第二布局参数，对可视化视图中第二图表的布局进行更新。

通过实现方式A，用户通过修改父图表的坐标轴属性，即可批量的修改每个子图表的布局，避免为每个子图表分别修改布局带来的繁琐操作，显著提升了布局修改效率。

实现方式B、通过修改子图表本身的属性来修改子图表的布局。例如，响应于第二更新指令，获取第二图表更新后的位置坐标；根据第二图表更新后的位置坐标，对可视化视图进行更新。

通过实现方式B，允许用户修改子图表自身的位置来调整子图表的布局，从而提升布局调整灵活性，有助于子图表布局更加精确。

实现方式C、通过交换父图表和子图表的父子关系来修改图表布局。例如，响应于关系互换指令，根据第二图表的坐标轴属性，获取第三布局参数，关系互换指令指示对第一图表与第二图表的父子关系互换；根据第三布局参数对可视化视图进行更新，更新后的可视化视图中第一图表按照第三布局参数排列。

通过实现方式C，允许用户拖拽交换同类元素从属关系，进而改变图表的结构，很大程度上避免了用户因修改顶层结构导致了重复改代码的工作，极大的提高了图表结构修改的效率。

在一些实施例中，可视化视图是通过构建界面提供的，构建界面用于构建图表的可视化视图。具体来说，提供构建界面，构建界面包括可视化视图。

在一些实施例中，构建界面包括可视化视图和代码区域。

在一些实施例中，构建界面中代码区域用于对生成可视化视图的第一代码进行展示。

通过这种方式，将构建好的可视化视图以及可视化视图的生成代码通过同一个界面返回给用户，方便用户同步查看可视化视图的效果以及代码。

在一些实施例中，方法还包括：响应于代码导出指令，将代码区域中第一代码输出至目标位置。

通过导出代码的功能，方便用户修改代码进行二次开发，也支持用户将代码拷贝到其他项目中来部署复杂可视化视图。

在一些实施例中，方法还包括：响应于代码运行指令，通过运行在代码区域中输入的第二代码，对可视化视图进行调整。

通过这种方式，用户输入的代码能反馈到交互构建过程中，可视化视图随着用户输入的代码而同步更新，从而支持用户通过输入代码来调整可视化视图，如此，支持灵活使用代码构建和交互构建这两种构建方式搭建图表，解决了相关技术中代码构建和交互构建只能选择一项使用的技术问题。

在一些实施例中，方法还包括：响应于构建界面上触发的对可视化视图的属性设定操作，获取属性设定操作对应的第三代码；将第三代码增加至构建界面中的代码区域。

通过这种方式，在用户交互构建可视化视图的场景下，每当用户执行一次操作时，界面中展示的代码能够跟随用户的操作而实时更新，从而将用户本次操作产生的代码更及时地反馈给用户，便于用户交互式的调整图表参数和嵌套逻辑，进一步提高可视化视图的构建效率。

在一些实施例中，构建界面还包括层次视图，层次视图用于展示第一图表的层次结构图，层次结构图中第二图表位于第一图表的下层。

通过这种方式，将嵌套图表的逻辑结构直观地呈现给用户，帮助用户梳理构建可视化视图的逻辑，从而降低用户构建可视化视图的学习成本。

在一些实施例中，上述构建界面支持选择性显隐其他未操作的图表的功能。例如，响应于对第一图表的隐藏指令，提供第一图表处于隐藏状态的可视化视图；或者，响应于对第二图表的隐藏指令，提供第二图表处于隐藏状态的可视化视图。

通过这种方式，有助于节省界面展示空间，在有限的空间内更加高效的搭建嵌套类图表。同时，这种操作符合图表封装的逻辑思想，避免了多个图表同时展示在交互区域所带来的视觉混乱和错误操作。

在一些实施例中，构建好的可视化视图能通过多种方式提供给用户。

例如，由云端设备来构建可视化视图时，云端设备向构建请求的发起方发送可视化视图的内容。通过这种方式，支持将可视化视图的构建流程封装为云服务提供给客户。

又如，由终端设备来构建可视化视图时，终端设备在构建界面中显示可视化视图。

第二方面，提供了一种可视化视图的构建装置，该可视化视图的构建装置具有实现上述第一方面或第一方面任一种可选方式的功能。该可视化视图的构建装置包括至少一个功能模块，至少一个功能模块用于实现上述第一方面或第一方面任一种可选方式所提供的方法。

在一些实施例中，可视化视图的构建装置中的功能模块通过软件实现，可视化视图的构建装置中的功能模块是程序模块。在另一些实施例中，可视化视图的构建装置中的功能模块通过硬件或固件实现。

可视化视图的构建装置可选地运行在云计算系统(包括多个云计算设备，如服务器)，用于向客户提供构建可视化视图的云服务。可替代地，可视化视图的构建装置运行在边缘计算系统(包括多个边缘计算设备，如服务器、台式电脑等)；可替代地，可视化视图的构建装置运行在终端设备上(如笔记本电脑、个人台式电脑等)。

第二方面提供的可视化视图的构建装置的具体细节可参见上述第一方面或第一方面任一种可选方式，此处不再赘述。

第三方面，提供了一种计算设备，该计算设备包括处理器和存储器，其中存储器中存储有计算机指令，处理器执行计算机指令，以实现第一方面及其可能的实现方式的方法。在一些实施例中，该计算设备还包括网络接口，用于通过网络发送构建好的可视化视图。在一些实施例中，该计算设备还包括屏幕，用于显示构建好的可视化视图。

第四方面，提供了一种(非瞬态的)计算机可读存储介质。该(非瞬态的)计算机可读存储介质中存储有至少一条指令，该指令在计算机上运行时，使得计算机执行上述第一方面或第一方面任一种可选方式所提供的方法。该存储介质的类型包括但不限于易失性存储器，例如随机访问存储器，非易失性存储器，例如快闪存储器、硬盘(hard disk drive，HDD)、固态硬盘(solid state drive，SSD)。

第五方面，提供了一种计算机程序产品，所述计算机程序产品包括一个或多个计算机程序指令，当所述计算机程序指令被计算机加载并运行时，使得所述计算机执行上述第一方面或第一方面任一种可选方式所提供的方法。该计算机程序产品可选地为软件安装包，在需要使用上述第一方面提供的方法的情况下，下载该计算机程序产品并在计算设备上执行该计算机程序产品。

第六方面，提供了一种芯片，包括存储器和处理器，存储器用于存储计算机指令，处理器用于从存储器中调用并运行该计算机指令，以执行上述第一方面及其第一方面任意可能的实现方式中的方法。

第七方面，提供了一种计算设备集群，该计算设备集群包括至少一个计算设备。上述第二方面中计算设备的不同单元分布在计算设备集群中的不同的计算设备上运行。可选地，该计算设备集群为云计算系统(包括多个云计算设备，如服务器)。可替代地，该计算设备集群为边缘计算系统(包括多个边缘计算设备，如服务器、台式电脑)；可替代地，该计算设备集群为终端设备集群(包括多个终端，如笔记本电脑、个人台式电脑等)。

附图说明

图1是本申请实施例提供的一种应用场景的示意图；

图2是本申请实施例提供的一种可视化视图的构建方法的流程图；

图3是本申请实施例提供的一种嵌套图表的可视化视图；

图4是本申请实施例提供的一种构建嵌套图表的逻辑层级结构的示意图；

图5是本申请实施例提供的一种可视化组件的构建界面的逻辑架构图；

图6是本申请实施例提供的一种可视化视图的构建界面的示意图；

图7是本申请实施例提供的一种对图表选择性显隐的示意图；

图8是本申请实施例提供的一种可视化视图的构建界面的示意图；

图9是本申请实施例提供的一种添加子图表后图表嵌套效果图；

图10是本申请实施例提供的一种添加子图表后图表嵌套效果图；

图11是本申请实施例提供的一种可视化视图的构建界面的示意图；

图12是本申请实施例提供的一种可视化视图的构建装置的结构示意图；

图13是本申请实施例提供的一种计算设备的结构示意图。

附图标记：

10-终端

11-服务器

40-图表

401-X坐标轴

402-Y坐标轴

403-图符

4031-文本

4032-图表

40321-X坐标轴

40322-Y坐标轴

40323-图符

403231-矩形

501-交互模块

502-代码模块

503-绘制模块

60-构建界面

601-数据视图

602-交互构建视图

603-层次视图

6031-图符

604-属性视图(也称参数配置视图)

6041-输入组件

6042-输入组件

6043-输入组件

6044-输入组件

605-构建结果展示区域(也称可视化效果展示区)

6051-可视化视图(父图表)

60511-父图表的图表类型图符(即子图表)

605111-子图表的矩形图符

60512-父图表的文本图符

6052-用于触发导出可视化视图的导出控件

606-代码区域

6061-用于触发运行代码的运行控件

6062-用于触发导出代码的导出控件

具体实施方式

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

下面对本申请实施例涉及的一些术语概念做解释说明。

(1)数据可视化(data visualization)

数据可视化是指将数据的属性编码为图形的属性以展示数据的技术。数据可视化用于向用户更清晰有效地传达数据包含的信息。例如，将人群的数量编码为圆形的尺寸，圆形尺寸越大，表示人群数量越多，从而通过圆形的尺寸大小直观有效地传达人群数量的多少；又如，将日期编码为点的颜色，将工作日编码为颜色1，将节假日编码为颜色2，从而通过不同的颜色直观地区分出节假日和工作日。

(2)图符

图符是用来展示数据的图形。图符有时也称为可视化元素、图形符号、视觉符号或界面元素。从图符的形状的角度来看，图符包括而不限于矩形、圆形、弧、曲线、文字、路径、区域、三角形、星型等等。从图符的属性的角度来看，图符的位置(如x坐标和y坐标)、尺寸、颜色、形状、纹理、线宽、半径、长度、宽度等各种属性都能够用来表示数据。例如，将圆形(图符)的面积与人群的数量(数据的属性)关联，圆形的面积越大表示人群数量越多。不同类型的图符可能具有相同的属性，也可能具有不同的属性。例如，圆形图符具有半径属性，矩形图符具有宽度属性。

(3)视觉通道

视觉通道是指图符用来传递信息的视觉属性。例如，视觉通道包括而不限于位置，大小，颜色，形状，纹理等。

(4)图表

图表是一种通过图符来表示数据属性的图形。图表中包含一种或多种图符。典型的图表例如柱状图、折线图、饼图等。本申请实施例提供的可视化视图中，图表是具有坐标轴属性的可视化元素。图表的坐标轴属性用于控制图表中包含的图符的布局。在图表包含多个图符的情况下，图表的坐标轴属性用于控制图表中每一个图符的布局。

(5)坐标轴属性

坐标轴属性用于指示数据的值与画布像素范围(即可视化视图中位置)之间的映射关系。坐标轴属性有时也称为坐标轴参数。坐标轴属性包括而不限于坐标轴的类型、坐标轴的定义域、坐标轴的值域等。

坐标轴类型包括而不限于线性坐标轴、类别坐标轴、圆形坐标轴、二次函数坐标轴、指数函数坐标轴、极坐标轴等。

坐标轴的定义域(domain)表示待进行可视化的数据的取值范围。例如，坐标轴的定义域为[0,100]，表示待进行可视化的数据的取值范围为[0,100]。

坐标轴的值域(range)也称坐标轴的范围，坐标轴的值域用于指示坐标轴在画布中分布的范围。坐标轴的值域用来确定在构建可视化视图时，在定义域范围内的数据应当绘制在画布中多大的区域内。例如，如果坐标轴的值域为[0,600]、[0,800]，表示在画布中长为600、宽为800的矩形中绘制坐标轴。

(6)图表之间的父子关系

图表之间的父子关系是一种逻辑关系，有时也称为嵌套关系或者说从属关系。例如，一个可视化视图中，如果图表A包含图表B，图表A和图表B具有父子关系，图表A为图表B的父图表，图表B为图表A的子图表。

(7)图表类型图符

图表类型图符是指类型为图表的图符。图表类型图符能够充当另一个图表的子图表。图表类型图符的内容与图表一样，图表类型图符包含坐标轴以及图符。可选地，图表类型图符内部继续嵌套图符图表，从而产生更深层次的嵌套结构。

(8)布局参数

布局参数是指用于控制可视化视图中布局的参数。布局参数包括而不限于位置、角度、间距、偏移、法向量方向、切线方向等。例如，布局参数为X坐标和Y坐标。本申请的一些实施例中，基于图表的坐标轴属性来控制图表中图符的布局参数。具体来说，图表的坐标轴属性与图表中图符的布局参数具有映射关系，当获得图表的坐标轴属性后，能够基于该映射关系确定图表中图符的布局参数。

数据可视化通过提取数据中所包含的数据信息，在以图形、尺寸、颜色等视觉通道对数据信息值进行展示，将原本难以理解的数据内容以直观、易于理解的方式进行表达，从而提升用户分析和理解数据的效率。数据可视化技术在财务金融、大数据、智慧城市等领域有了越来越广泛的应用。

面对日益复杂的数据信息，传统的可视化图表往往难以完成复杂的可视分析任务，尤其是需要对比同一结构的数据时，常常需要将多个相同或相关类型的子图表按某种布局进行排列展示，形成small multiple的可视化视图，方便用户横向对比。例如，在对多个国家中感染传染病的情况进行可视化时，可以将各个国家的感染人群数量与时间的折线图排列在同一个视图中，方便用户对比不同国家的感染情况和发展趋势。

小图表的样式不一定是规则的可视化图表(如折线图、折线图、饼图)。例如，在展示了三年内用户的工作时间信息时，可以采用日历图的样式构建可视化视图。日历图每一行都有12个月份的子图表，每个子图表都使用布局、颜色、和圆形半径展示了包含日期，礼拜日以及相关数据的数值大小情况。

除了小图表自身的可视化形式，小图表的布局形式也可能十分复杂。例如，一个可视化图表中各个子图表可能不是均匀分布的。为了实现复杂的可视化视图，传统的可视化构建方法通常需要开发人员手动计算每个可视化元素在画布上的具体位置和旋转角度等，进行视觉编码和可视化渲染，同时，需要在实现过程中保证代码的简洁、易读和可扩展性。这不仅要求开发人员具备很强的编程能力，还需要花费大量时间进行数值计算、逻辑构建和代码维护，从而导致了可视化开发效率的低下。

一些研究提供了组件模板构建方案，通过用户选择可视化模板，输入数据，获取可视化视图。

然而在研究过程中发现，有限的图表类型只能满足某些预定义的可视分析需求，无法让用户根据自己的分析任务定制可视化视图样式。可视化编程语言虽然可以帮助用户高度定制可视化视图，然而，如上文所述，用户需要直接编写程序实现可视化视图的逻辑关系构建，位置计算和视觉编码任务，有很高的学习成本，搭建成本，可视化视图的开发效率高度依赖用户的编码能力和对应用程序接口(Application Programming Interface，API)的熟悉程度。尽管近年来不少工作致力于研究交互式可视化构建界面，通过提供拖拽输入等简单交互的方式构建图表，但是它们更多地关注于帮助用户实现将数据属性映射到颜色、尺寸等视觉通道的任务，没有从宏观结构上把控复杂图表的图表逻辑构建，交互式地完成如small multiple或嵌套类可视化视图构建任务。因此亟需一种针对复杂嵌套类图表的构建方法来改进低效率开发方案。

有鉴于此，本申请实施例提供了一种支持构建复杂嵌套图表的可视化视图的方法。该方法基于对多图表组合的构建过程做封装的技术构思，将子图表视为父图表包含的图符，使用父图表的坐标轴属性来控制子图表的布局，进而实现可视化视图的构建。由于将子图表视为父图表包含的图符，能够将复杂的small multiple可视化视图抽象成多个简单图表的嵌套组合。从父图表的角度来看，子图表是父图表内部的一个子元素，在通过父图表坐标轴来指定子图表的位置时，无需过多考虑子图表的详细内容；从子图表的角度来看，子图表的样式可以单独定义，用户在构建子图表的详细内容时，无需过多考虑子图表在整体画布上的布局等计算过程。并且，子图表作为图符，能够按照图符的规则处理子图表，不必再为子图表设定一套额外的逻辑。由此可见，本申请实施例使得复杂图表的可视化构建逻辑简单化、清晰化、明确化，降低了实现复杂度，显著地简化了可视化构建流程，提高了可视化构建效率，降低用户的学习使用成本。

下面对本申请实施例的应用场景举例说明。

附图1是本申请实施例提供的一种应用场景的示意图。如附图1所示，该应用场景包括终端10和服务器11，终端10和服务器11通过有线网络或无线网络相连。下面对附图1中各个设备的作用、典型产品形态、部署位置和交互方式举例说明。

(1)终端10

终端10用于接收用户的操作以及向用户展示可视化图表。在本申请的一些实施例中，终端10具体用于在屏幕中显示针对嵌套图表的可视化构建界面以及接收用户对可视化构建界面的输入。

在本申请的一些实施例中，终端10用于为用户提供交互和输入代码这两种方式来构建可视化图表的渠道，从而保证可视化构建的灵活性和正确性。在采用交互的方式构建的过程中，终端10显示的上述可视化构建界面包括输入组件(如输入框、选择框)，用户对输入组件触发输入操作，输入图表的属性。终端10接收用户在输入组件上输入的图表的属性，基于用户配置图表的属性获取构建的可视化视图，将构建好的可视化视图显示在构建界面中。在采用代码的方式构建的过程中，用户在可视化构建界面输入程序代码。终端10接收用户在可视化构建界面输入的程序代码，基于用户输入的程序代码获取构建的可视化视图，将构建好的可视化视图显示在构建界面中。

终端10存在多种可能产品形态。终端10包括而不限于个人计算机、移动电话、笔记本电脑、IP电话、摄像头、平板电脑、可穿戴设备等。

终端10部署在终端10环境中或边缘环境中。在一些实施例中，终端10部署在局域网中。

(2)服务器11

服务器11用于提供可视化视图的构建服务。在本申请的一些实施例中，服务器11具体用于根据父图表的坐标轴属性计算子图表的布局参数，如子图表在界面的画布区域中位置坐标。可选地，服务器11还用于承担可视化视图构建时其他占用较大算力的任务。

服务器11可选地是独立的硬件设备、或者是包含多个硬件设备的集群或者分布式系统，或者是基于云计算以及网络功能虚拟化(network functions virtualization，NFV)技术所实现的虚拟化设备。虚拟化设备包括而不限于虚拟机或容器。

服务器11部署在云环境中。在一些实施例中，终端10部署在互联网中。

在一些实施例中，终端10和服务器11通过交互来实施下述方法实施例。例如，终端10响应于用户的操作，向服务器11发送可视化请求，访问服务器11提供的可视化构建服务。可视化请求中携带了构建图表所需的信息，如通过构建界面的输入组件配置的参数或者通过构建界面输入的代码。服务器11响应于可视化请求，根据可视化请求携带的信息构建可视化图表，将可视化图表返回给终端10。

终端10和服务器11的交互方式包括而不限于通过浏览器软件或者业务客户端软件交互的方式。在采用浏览器软件的方式交互时，上述服务器11例如是网站服务器11，终端10通过浏览器软件访问指定网页从而触发上述可视化请求，服务器11将构建的可视化视图携带在HTML文件中返回给终端10。在采用业务客户端软件的方式交互时，上述服务器11例如是业务客户端软件关联的后台服务器11，终端10通过业务客户端软件访问上述服务器11，从而获得可视化视图。

上述附图1所示的终端10和服务器11交互的场景是可选地。可替代地，终端10本地执行下述方法实施例。

下面对本申请实施例的方法流程举例说明。

附图2是本申请实施例提供的一种可视化视图的构建方法的流程图。附图2所示方法包括以下步骤S201至步骤S204。

附图2所示方法所基于的网络部署场景可选地如上述附图1所示。例如，结合附图1来看，附图2所示方法中的计算设备为附图1中的服务器11或者终端10。

附图2所示方法以一个计算设备执行步骤S201至步骤S204为例进行说明。在另一些实施例中，步骤S201至步骤S204由多台设备协作执行。例如，结合附图1来看，附图2所示方法由服务器11和终端10协作执行。在一些实施例中，服务器11承担主要处理工作，终端10承担次要处理工作；在另一些实施例中，服务器11承担次要处理工作，终端10承担主要处理工作；或者，服务器11或终端10分别单独承担处理工作。在一种可能的实现中，终端10充当可视化视图构建请求的发起方，请求服务器11构建图表的可视化视图；服务器11充当可视化视图请求的响应方，构建可视化视图并将构建好的可视化视图返回给终端10，由终端10展示可视化视图。

附图2所示方法涉及构建包含多个图表的可视化视图。为了区分不同的图表，用“第一图表”、“第二图表”、“第三图表”区分描述多个不同的图表。

附图2所示方法可选地用于构建两层以上嵌套关系的图表的可视化视图。为了描述简洁，附图2所示方法侧重描述构建两层嵌套关系的图表的流程，即，在第一图表包含第二图表的场景下，如何构建这2个图表整体的可视化视图。在图表包含更深层次嵌套结构的场景下，其他不同层次之间的图表的处理方式可参考基于第一图表对第二图表的处理方式。例如，在图表包含三层嵌套结构的场景下，第一图表的图符包含第二图表，第二图表的图符包含第三图表，在处理第三图表时，可以基于第二图表的坐标轴属性来布局第三图表。

附图2所示方法可选地用于构建具有父图表包含两个或两个以上的子图表的场景。为了描述简洁，附图2所示方法以如何对父图表的其中一个子图表(第二图表)处理为例进行说明。在父图表包含更多子图表的情况下，其他子图表的处理方式可参考对第二图表的处理方式。

步骤S201、计算设备接收构建请求。

构建请求指示构建第一图表的可视化视图。可选地，构建请求通过用户对构建界面上的操作触发。

第一图表绑定的图符包括第二图表。第一图表和第二图表具有父子关系，第一图表为父图表，第二图表为子图表。例如，结合附图3来看，第一图表是附图3中的父图表40。第二图表是附图3中的矩形图符(子图表)403。又如，结合附图9来看，第一图表是附图9中的父图表6051。第二图表是附图9中的子图表60511。

步骤S202、计算设备根据第一图表的坐标轴属性，获取第二图表的第一布局参数。

在一些实施例中，计算设备预先建立坐标轴属性与布局参数之间的映射关系。在执行本步骤时，计算设备以第一图表的坐标轴属性为输入参数，利用预先建立的映射关系进行计算，从而得到第一布局参数。

在一些实施例中，上述映射关系具体包含坐标轴定义域、坐标轴值域、数据值与画布中像素位置(布局参数)之间的映射关系。在执行本步骤时，计算设备以第一图表的坐标轴定义域、第一图表的坐标轴值域、第二图表绑定的数据值为输入参数，利用预先建立的映射关系进行计算，从而得到第一布局参数。

在一些实施例中，上述映射关系中，第二图表在画布中像素位置(布局参数)具体根据第二图表绑定的数据值在定义域中的比例确定的。在一个具体示例中，第一图表(父图表)的X坐标轴的定义域设定为[0,2]，表示用户可以简单地通过指定图表的x坐标为0、1、2三个整数来均匀的分布三个图表；第一图表(父图表)的X坐标轴的值域为[0,600]，表示第一图表在画布的X方向上所占的像素位置范围为[0,600]。如果第二图表绑定的数据值为0，则第二图表对应的像素位置就是0；如果第二图表绑定的数据值为1，则第二图表对应的像素位置是300；如果第二图表绑定的数据值为2，则第二图表对应的像素位置是600。

总结上述列举的各种根据第一图表的坐标轴属性获取第二图表的第一布局参数的方式可见，通过定义坐标轴这种比较简单的操作，即可计算出合理的图表位置，满足基本布局要求，复杂度低，运算开销小。

在一些实施例中，支持在父图表的坐标轴属性对应的位置的基础上进一步调优，从而得到更加精确的子图表的位置。例如，计算设备根据第一图表的坐标轴属性，获取第二图表的基准布局参数；对基准布局参数进行调整，得到第一布局参数。通过上述方式，不仅依靠坐标轴简化了布局流程，而且不局限于基于坐标轴的布局方式。具体来说，一方面，通过对基准位置进行调整能实现更加精细的布局，从而提升可视化的构建效果。另一方面，相比于从零开始计算布局来说，由于基准位置为布局的计算提供了参考量，降低了计算布局的复杂度。

具体如何基于父图表的坐标轴属性所定义的基准位置做调整包括多种实现方式，下面结合两种实现方式举例说明，参见下述实现方式一和实现方式二。

实现方式一、通过改变图符图表(第二图表)自身的属性来对基准位置做调整。

具体来说，计算设备根据第二图表的位置坐标、位移或角度，对基准布局参数进行调整，得到第一布局参数。

实现方式二、通过图表的力引导属性来对基准位置做调整。

力引导属性是一种基于力导向算法(force-directed algorithm)进行图布局的属性。例如，用户将第一图表的力引导属性设置为true(真，表示力引导属性处于开启状态)，计算设备根据第一图表的力引导属性，对基准布局参数进行调整，得到第一布局参数。

通过实现方式二，对于气泡图(bubble chart)，或者其他包含大量子图表或者不同子图表分布密集的图表来说，根据坐标轴属性计算出的基准位置可能造成子图表重叠，此时通过上述实现方式二，额外设置力引导布局属性，能让每个子图表相切，从而达到不同子图表互不重叠的效果。

以上通过两种方式介绍了如何对基准位置做调整。可替代地，采用其他方式进行位置调整。例如，预先设定用于调整位置的计算规则，对更加复杂的调整场景时，计算设备向用户提供预先设定的计算规则从而辅助用户调整位置。

步骤S203、计算设备根据第一布局参数，获取第一图表的可视化视图。

可视化视图包括第一图表和第二图表，可视化视图中第二图表按照第一布局参数排列。例如，第一布局参数为位置，可视化视图中第二图表位于第一布局参数所指定的位置。

获取可视化视图的具体实现方式包括很多种。举例来说，计算设备在画布的第一布局参数对应的位置绘制第二图表，得到可视化视图。

在一些实施例中，在子图表中包含图符的情况下，根据图符在子图表中的位置和子图表在父图表中的位置设定子图表中图符的位置，求解一个图符在画布中的全局位置作为图符的最终位置。例如，上述第二图表(子图表)绑定的图符包括第三图表(子图表中图符)，计算设备在构建可视化视图的过程中，根据第三图表在第二图表中的位置和第二图表在第一图表中的位置，获取第三图表在可视化视图中的位置。

步骤S204、计算设备提供可视化视图。

可选地，可视化视图通过构建界面提供给用户。构建界面是用于构建数据的可视化视图的界面。例如，计算设备提供的构建界面包括可视化结果展示区域，该可视化结果展示区域中显示有可视化视图。通过该构建界面，能够在可视化搭建过程中直观地展示嵌套图表的构建结果。可替代地，可视化视图通过文件、构建界面之外的其他界面等其他形式提供给用户。

提供可视化视图包括多种具体方式。在一种可能的实现中，计算设备向构建请求的发起方发送可视化视图的内容。例如，计算设备提供为云端服务器11，构建请求的发起方为终端10，上述构建请求为超文本传输协议(Hyper Text Transfer Protocol，HTTP)请求，计算设备获得可视化视图后，将可视化视图的内容封装为超文本标记语言(Hyper TextMarkup Language，HTML)文件，将HTML文件通过HTTP响应发送给终端10。在另一种实现中，计算设备在构建界面中显示可视化视图。

本实施例提供的方法，通过在构建嵌套图表的可视化视图时，将子图表视为父图表绑定的图符，使用父图表的坐标轴属性来控制子图表的布局，从而将复杂图表在逻辑上拆分为简单图表的嵌套组合，使得复杂图表的逻辑结构清晰化。尤其是，在父图表包含大量子图表的场景下，利用父图表的坐标轴属性有助于批量化地获得所有子图表的布局，而无需开发者为每个子图表单个计算和配置，因此显著地简化了可视化构建流程，提高了可视化构建效率，降低使用门槛。

本申请的一些实施例支持采用多种方式修改可视化视图中图表的布局。下面，对实现图表布局修改的一些可能实现方式举例说明，请见下述实现方式一至实现方式三。

下述实现方式一至实现方式三涉及修改前的图表的布局参数以及修改后图表的布局参数。为了区分不同的布局参数，用“第一布局参数”、“第二布局参数”、“第三布局参数”区分描述多个不同的布局参数。此外，为了区分描述不同方式涉及的更新布局相关的指令，用“第一更新指令”、“第二更新指令”区分描述多个不同的更新指令。

实现方式一、通过修改父图表的坐标轴属性来修改子图表的布局。

具体来说，父图表的坐标轴属性包括类型、值域、范围(定义域)等等，父图表的这些坐标轴属性能够用来修改子图表的布局。

例如，计算设备响应于第一更新指令，对第一图表的坐标轴属性进行更新；计算设备根据第一图表更新后的坐标轴属性，获取第二图表的第二布局参数；根据第二布局参数，对可视化视图中第二图表的布局进行更新。

其中，第一更新指令指示对父图表(第一图表)的坐标轴属性进行更新。第一更新指令包括父图表(第一图表)的更新后的坐标轴属性。第一更新指令可选地是通过在构建界面上的操作触发的。例如，在采用交互构建的方式时，第一更新指令是对父图表的坐标轴的属性更新操作触发的，比如，对属性面板中父图表的坐标轴选项触发操作，在坐标轴选项中输入父图表更新后的坐标轴属性，从而触发第一更新指令。又如，在采用代码构建的方式时，第一更新指令是对构建界面中输入用于更新父图表的坐标轴属性的程序代码触发的。

实现方式二、通过修改子图表本身的属性来修改子图表的布局。

例如，计算设备响应于第二更新指令，获取第二图表更新后的位置坐标；根据第二图表更新后的位置坐标，对可视化视图进行更新。其中，第二更新指令指示对子图表(第二图表)的位置坐标进行更新，第二更新指令包括对子图表(第二图表)更新后的位置坐标。第二更新指令的触发方式可参考对第一更新指令的触发方式的介绍。

实现方式三、通过交换父图表和子图表的父子关系来修改图表布局。

例如，计算设备响应于关系互换指令，根据第二图表的坐标轴属性，获取第三布局参数；根据第三布局参数对可视化视图进行更新，更新后的可视化视图中第一图表按照第三布局参数排列。

其中，关系互换指令指示对第一图表与第二图表的父子关系互换，即，将第一图表的角色从第二图表的父图表更新为第二图表的子图表，将第二图表的角色从第一图表的子图表更新为第一图表的父图表。在一些实施例中，关系互换指令是对构建界面上执行的操作触发的。可选地，关系互换指令是对父图表(第一图表)与子图表(第二图表)的拖拽交换操作触发的。例如，用户对构建界面中触发拖拽操作，交换父图表(第一图表)与子图表(第二图表)在构建界面中的位置关系，从而触发关系互换指令。可替代地，关系互换指令是对构建界面上输入的声明父图表(第一图表)与子图表(第二图表)的角色互换的程序代码触发的。

以上介绍了一些修改布局的可能实现方式，通过上述实现方式，可视化视图中图表的布局能够随着对图表或图符属性的修改而调整，实现图表布局效果的灵活调优。

下面，对本申请实施例提供的图形语法进行介绍。

本申请实施例提供了一种更加合理的可视化图形语法声明嵌套类图表的构建流程，从而简化嵌套类图表的构建流程。具体来说，本申请实施例提供的图形语法将复杂的small multiple可视化视图抽象成多个简单图表的嵌套组合，并帮助用户定义简单图表之间的嵌套关系。在搭建过程中，父图表可以用于控制子图表的布局结构，用户可以通过修改父图表坐标轴的类型、值域、范围等属性来修改子图表的布局结构；而子图表则作为父图表的“图符”，用于绘制具体的可视化元素，或进一步支持更底层可视化视图的布局。

本申请实施例提供的图形语法将可视化视图内容抽象为画布、图表、坐标轴、图符四类元素，通过对四类元素排列组合，来定义可视化图表的整体结构。下面，对这四类元素进行具体介绍。

(1)画布

画布是与HTML元素绑定的用于容纳其他元素的容器。本申请实施例提供的画布支持canvas(HTML中的一种元素，是依赖分辨率的位图画布，可以在canvas上面绘制任何图形，甚至加载照片)、可缩放的矢量图形(Scalable Vector Graphics，SVG)、web图形库(WebGraphics Library，WebGL，一种3D绘图协议规定的格式)等格式，允许用户自定义宽、高、背景色、边距等属性。

(2)图表

抽象的可视化图表包括由X坐标轴、Y坐标轴组成的坐标系以及不同图符组成的可视化元素。

(3)坐标系

图表绑定的坐标系用于控制图表包含的图符的布局。坐标系包含X坐标轴和Y坐标轴。本实施例为坐标系提供了多种类型的坐标轴。例如，坐标系中的X坐标轴或Y坐标轴包括而不限于线性坐标轴，极坐标轴，圆形坐标轴，指数函数坐标轴，二次函数坐标轴，类别坐标轴等等。可选地，坐标系中坐标轴的种类由用户自定义设定；可替代地，坐标系中坐标轴是默认种类的坐标轴。坐标系中坐标轴具有坐标轴属性。在一些实施例中，坐标轴属性包括通用属性以及专有属性。通用属性包括定义域和值域。专有属性为坐标轴种类对应的属性，例如，极坐标轴的专有属性包括起始角度。

(4)图符

图符是用来显示数据的按形状划分的可视化元素。本申请实施例中图符包括而不限于矩形、圆、弧、曲线、文字、路径、区域等7种类型。图符包含一种或多种视觉通道。图符包含的视觉通道包括而不限于颜色、面积、高、宽等。图符包含的视觉通道能够与数据的属性进行绑定，通过视觉通道能直观地对数据的属性进行展示。

下面对本申请实施例提供的基于上述图形语法的构建界面举例说明。

本申请实施例设计了一个基于上述图形语法的针对嵌套式图表的可视化构建界面。该构建界面以低代码构建为技术构思，允许用户通过拖拽、选取、输入的交互方式从零搭建完整的嵌套类图表。同时，该界面包括代码界面和图形语法解析器，用户直接输入的代码可以通过解析器解析并反馈到交互构建过程中，从而允许用户输入构建好的代码，通过交互进行二次开发。如此，摆脱了编写代码的搭建局限，采用更加直观的交互方式构建嵌套类图表，并在搭建过程中直观展示嵌套类图表的结果及其对应用户操作的变化。

为了便于理解，首先介绍本申请实施例中构建界面整体的逻辑功能架构，再结合一个具体的界面为例说明构建界面中各个组件的功能。

请参考附图5，附图5出了可视化组件的构建界面的逻辑架构。该构建界面的架构包括交互模块501、代码模块502和绘制模块503，下面对这几个模块分别具体介绍。

(1)交互模块501

交互模块501通过建立构建界面中组件和图形元素之间的映射关系，为用户提供了拖拽定义可视化图表结构的能力。交互模块501包括下述交互构建视图和下述属性视图。

(2)代码模块502

代码模块502用于展示图表的生成代码。本申请实施例为每种可视化元素(如图表、图符等)预定义了基于图形语法的通用生成代码模板，计算设备会根据用户在交互模块501中的操作生成相应的代码并同步展示在代码模块502中，便于代码导出和二次开发。同时代码模块502包含了图形语法解析器，代码模块502能通过图形语法解析器从已生成的代码中提取代码结构，从而同步反馈到交互构建视图的元素结构中。图形语法解析器的存在打通了交互模块501和代码模块502的通道，为用户提供了自由使用交互方式和代码方式搭建图表的能力。

(3)绘制模块503

绘制模块503用于输出本申请实施例提供的可视化组件构建界面。绘制模块503具体用于展示可视化视图的生成代码运行后的实际渲染效果。绘制模块503与代码模块502是联动的，当用户对代码进行修改后，绘制模块503会根据修改后的代码重新绘制并展示图表，从而将代码的修改实时同步反映到绘制模块的图表样式上，便于用户交互式的调整图表参数和嵌套逻辑。

请参考附图9，附图9是本申请实施例提供的可视化视图的构建界面60的示意图。该构建界面60包括数据视图601、交互构建视图602、层次视图603、属性视图604、构建结果展示区域605以及代码区域606。下面，对构建界面60中各个组件的功能、使用者如何应用构建界面各个组件进行举例说明。

(1)数据视图601

数据视图601用于展示导入的待可视化的数据。数据视图601中展示的数据包括至少一个属性以及每个属性的值。例如，请参考附图9，在构建城市天气数据的可视化图表的应用场景下，用户将城市天气数据导入计算设备，计算设备在数据视图601中展示城市天气数据。其中，城市天气数据包括日期、地点、温度、降雨、风速这5个属性，城市A的城市天气数据中日期这一属性的值为5月1日，温度这一属性的值为28度。

(2)交互构建视图602

交互构建视图602用于供用户向可视化视图中创建图表。交互构建视图602允许用户指定图表中的图符种类、图表之间的嵌套关系、图表结构等。例如，附图9中交互构建视图602包含创建的一组矩形图符，附图11中交互构建视图602包含创建的两组矩形图符和一组圆形图符。

(3)层次视图603

层次视图603用于展示图表的层次结构图。层级结构图用于表示图表中包含的每个图符(子图表)。逻辑上处于不同层次的图表在层次结构图中具有不同的高度。例如，在执行附图2所示方法时，层次视图603用于展示第一图表的层次结构图，层次结构图中第二图表位于第一图表的下层。通过层次视图603的设计，能直观的展示当前构建中图表的层级结构，将图表层级结构通过界面传递给用户。

在一些实施例中，得益于图表封装的语法结构，本实施例提供的构建界面允许用户拖拽交换同类元素从属关系，进而改变图表的结构。例如参考附图6，附图6示出了交换父图表与子图表关系的示意图。用户在层次视图603中使用鼠标拖拽交换两个图表的位置关系。计算设备接收用户的拖拽交换操作，内部用于存储图表结构的对象就会相应改变，然后代码模块就会重新生成对应的代码，将原本的嵌套图表以子图表的样式作为布局，并填充父图表作为内容，同时交换图表之间的父子关系。通过这种方式，很大程度上避免了用户因修改顶层结构导致了重复改代码的工作，极大的提高了图表结构修改的效率。

(4)属性视图604

属性视图604用于供用户配置可视化元素的视觉属性(如颜色、尺寸等)，从而分割图表结构搭建和视觉内容填充，让用户的构建过程更加清晰。属性视图604包括多种输入组件。例如，请参考附图9，属性视图604包括用于输入图表名称的组件6041、用于输入图符类型的组件6042、用于输入X轴数据的组件6043和用于输入Y轴数据的组件6044。

在一些实施例中，属性视图604中，针对不同类型的参数提供了以下输入组件(a)至(f)。

组件(a)文本输入框：用于名称、等文本类型参数输入。

组件(b)数字输入框：用于高度、宽度、字号、线宽等数字类型参数输入。

组件(c)下拉框：用于枚举类型参数输入。

组件(d)颜色选择框：用于颜色输入。

组件(e)单选框：用于可选参数输入。

组件(f)组合式文本输入框：用于范围、边距等包含多个值的参数输入。

同时，考虑到颜色、尺寸等参数可能为非固定值的场景，当计算设备接收到对属性视图604数字输入框或颜色选择框的输入操作时，会根据向数字输入框或颜色选择框输入的内容的类型进行判断。如果向数字输入框输入的内容为有效数字，则使用输入的内容的格式作为配置结果；如果向数字输入框输入的内容不为有效数字，则使用字符串格式；如果向颜色选择框输入的内容为有效颜色，则使用输入的内容的格式作为配置结果；如果向颜色选择框输入的内容不为有效颜色，则使用字符串格式；由此保证用户能够自由定义输入内容。

(5)构建结果展示区域605

构建结果展示区域605用于呈现可视化视图的构建结果。绘制模块503绘制的可视化视图6051会在构建结果展示区域605中展示。在一些实施例中，构建结果展示区域605包括导出控件6052，当用户对导出控件6052触发操作时，计算设备将构建的可视化视图以图片、文件或者其他形式输出至目标位置。

(6)代码区域606

代码区域606用于对生成可视化视图的代码进行展示。在一些实施例中，代码区域606包括导出控件6062和运行控件6061。导出控件6062用于触发代码导出指令。当用户对导出控件6062触发操作时，计算设备响应于代码导出指令，将代码区域606中的代码输出至目标位置。运行控件6061用于触发代码运行指令。当用户对运行控件6061触发操作时，计算设备响应于代码运行指令，运行在代码区域606中输入的代码。

通过可视化组件构建界面，用户在搭建附图3所示图表结构时，便能够通过交互的方式进行，用户通过拖拽即可完成对象创建以及参数配置的步骤，进一步简化了搭建流程。

在一些实施例中，上述构建界面支持选择性显隐其他未操作的图表的功能。在构建包含多个图表的视图时，界面中可以只显示正在编辑中的图表。例如，在执行附图2所示方法时，计算设备响应于对第一图表的隐藏指令，提供第一图表处于隐藏状态的可视化视图；或者，响应于对第二图表的隐藏指令，提供第二图表处于隐藏状态的可视化视图。

例如，请参考附图7，附图7中的(a)示出了父图表处于隐藏状态、子图表处于显示状态下的界面，附图7中的(b)示出了父图表和子图表均处于显示状态下的界面。在父图表没有处于隐藏状态的情况下，如附图7中的(b)所示，界面中不仅会展示父图表(坐标轴、图符)，又会展示子图表(坐标轴、图符)。在父图表处于隐藏状态的情况下，如附图7中的(a)所示，界面中会隐藏父图表(坐标轴、图符)，展示子图表(坐标轴、图符)。

通过这种方式，有助于节省界面展示空间，在有限的空间内更加高效的搭建嵌套类图表。同时，这种操作符合图表封装的逻辑思想，避免了多个图表同时展示在交互区域所带来的视觉混乱和错误操作。

在一些实施例中，本申请实施例支持在一个统一的构建界面中，灵活使用代码构建和交互构建这两种构建方式搭建图表，从而解决了相关技术中代码构建和交互构建只能选择一项使用的技术问题，下面对代码构建相关的实现方式举例说明。

在一些实施例中，计算设备会在构建界面中展示用于生成可视化视图的程序代码。例如，请参考附图9，构建界面60包括代码区域606，代码区域606用于对生成可视化视图的第一代码进行展示。计算设备在构建界面60中展示可视化视图6051的同时，在代码区域606中展示可视化视图6051的生成代码。通过这种方式，将构建好的可视化视图以及可视化视图的生成代码通过同一个界面返回给用户，方便用户同步查看可视化视图的效果以及代码。

构建界面中展示的第一代码的来源包括很多种情况，下面结合两种情况举例说明。

情况一、构建界面中展示的第一代码是采用交互的方式构建可视化视图的过程中，根据用户对界面组件的操作生成的代码。

例如，请参考附图9，第一代码是基于交互构建视图602或者属性视图604上触发的、对元素属性的设定操作而生成的代码。第一代码表示为可视化元素设定的视觉编码。例如，用户在属性视图604中字体输入框(附图9未示出)中选择宋体作为文本图符的字体，第一代码表示将文本图符的字体设定为宋体。

情况二、构建界面中展示的第一代码是采用代码的方式构建可视化视图的过程中，用户输入的代码。例如，请参考附图9，第一代码是对构建界面中代码区域606中输入的代码。

在一些实施例中，上述构建界面支持导出可视化视图的生成代码的功能。例如，请参考附图9，上述构建界面中的代码区域606包括导出控件6062，用户对导出控件6062进行点击或其他操作，触发代码导出指令。计算设备响应于代码导出指令，将代码区域606中第一代码输出至目标位置。代码导出指令用于指示导出代码区域606中的第一代码。该目标位置用于保存导出的可视化视图6051的生成代码。该目标位置包括而不限于默认位置或者用户设定的位置。该目标位置包括而不限于计算设备本地的存储位置或者为云端的存储位置。通过导出代码的功能，方便用户修改代码进行二次开发，也支持用户将代码拷贝到其他项目中来部署复杂可视化视图。

在一些实施例中，上述构建界面支持输入可视化视图的生成代码的功能。例如，上述构建界面60中的代码区域606包含输入组件，能够接收用户的输入。用户在构建界面60中代码区域606输入第二代码，触发代码运行指令。计算设备响应于代码运行指令，通过运行在构建界面中代码区域606中输入的第二代码，对可视化视图进行调整，在构建界面60中提供调整后的可视化视图。其中，代码运行指令指示运行构建界面中输入的代码。示例性地，请参考附图9，构建界面60中代码区域606包括运行控件6061，代码运行指令通过对运行控件6061的操作触发。通过这种方式，用户输入的代码能反馈到交互构建过程中，从而支持用户通过输入代码来调整可视化视图。

在一些实施例中，计算设备会随着用户对可视化元素的属性设定操作，同步更新构建界面中展示的代码。例如，计算设备响应于构建界面上触发的对可视化视图中可视化元素的属性设定操作，获取属性设定操作对应的第三代码；将第三代码增加至构建界面中的代码区域。可选地，该属性设定操作为对第一图表(父图表)的属性设定操作，第三代码表示将第一图表(父图表)的属性配置为设定值。或者，可选地，该属性设定操作为对第二图表(子图表)的属性设定操作，第三代码表示将第二图表(子图表)的属性配置为设定值。

通过这种方式，在用户交互构建可视化视图的场景下，每当用户执行一次操作时，界面中展示的代码能够跟随用户的操作而实时更新，从而将用户本次操作产生的代码更及时地反馈给用户，便于用户交互式的调整图表参数和嵌套逻辑，进一步提高可视化视图的构建效率。

下面，对本申请实施例提供的复杂嵌套类型图表搭建逻辑进行介绍。以下介绍的父图表是附图2所示方法中的第一图表。以下介绍的子图表是附图2所示方法中的第二图表。以下介绍的子图表中的图表图符是附图2所示方法中的第三图表。

附图3示出了本实施例提供的一种嵌套图表。附图4示出了基于本实施例提供的图形语法构建的附图3的图表的逻辑层级结构。如附图3和附图4所示，将复杂的嵌套图表拆解为图表40、图表4032等多个图表的组合。图表40(父图表)的坐标轴包括类别为线性坐标轴的X坐标轴401、类别为线性坐标轴的Y坐标轴402。图表40绑定了图符403。图符403是一个类型为图表的对象，图符403包含文本4031、图表4032。图表4032包括类别是极坐标轴的X坐标轴40321、类别是类别坐标轴的Y坐标轴40322以及图符40323。图符40323包含矩形403231。

在使用代码搭建如附图3所示的嵌套图表时，按以下步骤(a)至步骤(e)自顶向下进行。

步骤(a)创建画布对象，绑定现有HTML元素，设定画布类型、宽度、高度、边距等参数。

步骤(b)调用画布对象的添加图表方法创建图表对象，使用绑定数据方法绑定数据。

步骤(c)分别创建X坐标轴对象和Y坐标轴对象，并调用图表提供的绑定方法与图表绑定，设定坐标轴的类型、定义域、值域等参数。

步骤(d)创建图符对象并与图表绑定，按照图符类型设定相关参数；添加嵌套图表时，将图符类型设为“图表”。

步骤(e)在图表图符对象对应的代码块内，按步骤(c)至步骤(e)添加坐标轴、图符或更深层图表嵌套。

在处理图表嵌套关系时，如附图4所示，复杂的图表拆解成简单图表的嵌套组合，再通过将子图表视为父图表的一种特殊图符，进行子图表的布局计算。子图表的样式则单独定义，用户在构建子图表的详细内容时不需要关心子图表在整体画布上的布局、旋转等计算过程，从而能够有更明确的结构逻辑关系。

下面结合一个实例，对应用上述构建界面对图表可视化的方法举例说明。

实例1

实例1包括步骤(a)至步骤(c)。

步骤(a)用户在本申请实施例提供的可视化组件构建界面中，通过鼠标拖拽将画布、图表拖入构建界面作为父图表，并为父图表添加坐标轴。用户修改父图表坐标轴类型、值域、范围等属性之后，计算设备通过本申请实施例提供的底层语法根据坐标轴属性自动求解图符的布局位置，无需额外计算工作。

如附图8所示，用户将父图表的X坐标轴的定义域设置为[0,2]，将父图表的Y坐标轴的定义域设置为[3,0]。设置定义域后，用户可以设置图表xy坐标为定义域中的整数来达到4*3的布局。计算机根据父图表的X坐标轴和Y坐标轴的定义域，确定整个绘制空间中图符按照4*3的网格进行布局。用户执行向父图表添加绑定图符的操作，添加文本类型的图符用于显示月份名称。计算设备按照定义的4*3网格，在界面中对月份进行排列。附图8中，Jan(一月)、Feb(二月)……Dec(十二月)为12个文本(text)类型、表示月份名称的图符。

步骤(b)用户为父图表添加图表图符(子图表)。计算设备将图表图符添加至界面中步骤(a)中求解的布局位置。

具体地，用户添加图表图符(子图表)后，设定图表图符的坐标轴分别为圆形类别坐标轴(圆形类别坐标轴是指将普通的类别坐标轴用以圆形排列)和线性坐标轴，然后添加矩形作为视觉通道并绑定相应数据。计算设备根据用户的设定，生成了如附图9所示的图表样式。此时，每个子图都是一个独立的图表，并且按照步骤(a)中定义的布局进行排列。如果此时用户对父图表的坐标轴属性进行修改，计算设备会根据父图表修改后的属性重新确定每个子图表的位置，并更新界面中每个子图表的位置，使得所有的子图表能在保持图表相对位置不变的情况下更新位置。

例如，请参考附图9，附图9示出了添加子图表后图表嵌套效果，附图9展示了嵌套有12个子图表的效果。附图9中每一个子图表的具体结构请参考附图10。附图9中每个圆形是一个图表图符，圆形表示的图表图符60511中包含一组矩形图符605111。这一组矩形图符605111中的每个矩形均是图表60511绑定的图符。每个圆形表示的图表60511均是图表6051绑定的图符。

通过设置了图表图符坐标轴为圆形类别坐标轴和线性坐标轴后，从而产生附图9或附图10所示的样式。附图9所示的界面中X轴数据表示图符位置的x坐标，附图9所示的界面中Y轴数据表示图符位置的y坐标，X轴数据和Y轴数据一般通过绑定数据指定。例如，用户将数据的某个字段设置给x或者y数据这个属性，作为图符x坐标或y坐标，从而实现X轴数据和Y轴数据的设定。

步骤(c)用户根据实际业务要求填充子图表内容。用户通过交互视图或代码视图为子图表添加矩形、圆等图符并设定颜色映射，计算设备即可生成附图11展示嵌套图表的最终效果。其中，附图11为灰度图，附图11中不同灰度表示数据的不同值。

总结上述实施例来看，本申请实施例对构建多图表组合的过程做了封装。不同于简单的API叠加，本申请实施例采用了一种更加可解释的表达方式，即将子图表作为“图符”应用到“图表嵌套”的结构中。借助这种方式，原本复杂的可视化视图能以简单图表的嵌套组合构建得到，更加有利于用户梳理图表结构逻辑，降低使用门槛。

除此之外，本申请实施例还搭建了一个可视化构建界面用于交互式搭建嵌套式图表。可视化构建界面以低代码为理念进行设计，同时整合图形语法解析器，从而允许用户使用代码交互合一的方式进行嵌套类图表的开发搭建工作。针对每种图表搭建的通用流程步骤，该界面预定义了相应的代码模板，用户只需要通过简单的拖拽交互，即可生成基本图表，大大简化了从零搭建的繁琐流程。

下面，对本申请实施例解决技术问题的一些原理进行具体分析。

针对每个图表都要单独计算位置，并手动叠加到每个可视化元素与位置相关的属性上，过程繁琐复杂的技术问题来说，本申请实施例通过定义坐标轴定义了数据坐标到画布位置的映射规则，这样根据每个图表绑定的数据，就可以批量得出每个图表的位置，而不需要为每个图表单独计算位置，从而解决了这一问题。

针对开发复杂图表的效率高度依赖用户对可视化设计的理解、对API的熟悉程度和编码能力的问题来说，本申请实施例预先定义了多种坐标轴类型，能涵盖很多常见图表布局，所以不需要用户额外定义，从而解决了这一问题。

针对不易于代码开发和调试的技术问题来说，本申请实施例由于对元素做了抽象，比如坐标轴、图符等，所以各个图符添加后就作为一个整体加到图表上，用户只要把相关属性指定好，计算设备就能在画布上显示嵌套图表。同时，通过本申请实施例的可视构建界面，每当用户修改一个参数，计算设备就会同步作用于显示模块的图表上，这样更加直观显示了每一步操作对图表的影响。

附图12是本申请实施例提供的一种可视化视图的构建装置的结构示意图，附图12所示的可视化视图的构建装置900用于实施上述各个方法实施例提供的可视化视图的构建方法。

可选地，结合附图1所示的应用场景来看，附图12所示的可视化视图的构建装置900是附图1中的终端10或服务器11。

可选地，结合附图2来看，附图12所示的可视化视图的构建装置900是附图2所示方法流程中的计算设备。

可视化视图的构建装置900包括通信模块901、布局计算模块902和视图生成模块903。通信模块901用于支持可视化视图的构建装置900执行S201和S204。布局计算模块902用于支持可视化视图的构建装置900执行S202。视图生成模块903用于支持可视化视图的构建装置900执行S203。

可选地，结合附图5来看，附图12所示的可视化视图的构建装置900中通信模块901包括附图5中交互模块501，附图12所示的可视化视图的构建装置900中布局计算模块902包括附图5中代码模块502，附图12所示的可视化视图的构建装置900中视图生成模块903包括附图5中绘制模块503。

可选地，可视化视图的构建装置900还包括代码获取模块，代码获取模块用于支持可视化视图的构建装置900获取属性设定操作对应的代码。可选地，代码获取模块包括附图5中代码模块502。

附图12所描述的装置实施例仅仅是示意性的，例如，上述功能模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个功能模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。在本申请各个实施例中的各功能功能模块可以集成在一个处理功能模块中，也可以是各个功能模块单独物理存在，也可以两个或两个以上功能模块集成在一个功能模块中。

可视化视图的构建装置900中的各个功能模块全部或部分地通过软件、硬件、固件或者其任意组合来实现。

在采用软件实现的情况下，例如，上述布局计算模块902和视图生成模块903是由附图13中的至少一个处理器801读取存储器802中存储的程序代码后，生成的软件功能功能模块来实现。

在采用硬件实现的情况下，例如，附图12中上述各个功能模块由计算设备中的不同硬件分别实现，例如，通信模块901例如由附图13中的网络接口803或输入输出接口806中至少一项实现。布局计算模块902由附图13中的至少一个处理器801中的一部分处理资源(例如多核处理器中的一个核或两个核)实现，而视图生成模块903由附图13中至少一个处理器801中的其余部分处理资源(例如多核处理器中的其他核)，或者采用现场可编程门阵列(field－programmable gate array，FPGA)、或协处理器等可编程器件来完成。

在采用软件硬件相结合的方式来实现的情况下，例如，附图12中通信模块901由硬件可编程器件实现，而附图12中布局计算模块902是由CPU读取存储器中存储的程序代码后，生成的软件功能功能模块。

下面对计算设备的基本硬件结构举例说明。

附图13是本申请实施例提供的一种计算设备的结构示意图，附图13所示的计算设备800用于实施上述各个方法实施例提供的可视化视图的构建方法。

可选地，结合附图1所示的应用场景来看，附图13所示的计算设备800是附图1中的终端10或服务器11。

可选地，结合附图2来看，附图13所示的计算设备800是附图2所示方法流程中的计算设备。

可选地，结合附图5来看，附图13所示的计算设备800包括附图5所示的交互模块501、代码模块502和绘制模块503。

计算设备800包括至少一个处理器801、存储器802以及至少一个网络接口803。

处理器801例如是通用中央处理器(central processing unit，CPU)、网络处理器(network processer，NP)、图形处理器(graphics processing unit，GPU)、神经网络处理器(neural-network processing units，NPU)、数据处理单元(data processing unit，DPU)、微处理器或者一个或多个用于实现本申请方案的集成电路。例如，处理器801包括专用集成电路(application-specific integrated circuit，ASIC)，可编程逻辑器件(programmable logic device，PLD)或其组合。PLD例如是复杂可编程逻辑器件(complexprogrammable logic device，CPLD)、现场可编程逻辑门阵列(field-programmable gatearray，FPGA)、通用阵列逻辑(generic array logic，GAL)或其任意组合。

存储器802例如是只读存储器(read-only memory，ROM)或可存储静态信息和指令的其它类型的静态存储设备，又如是随机存取存储器(random access memory，RAM)或者可存储信息和指令的其它类型的动态存储设备，又如是电可擦可编程只读存储器(electrically erasable programmable read-only Memory，EEPROM)、只读光盘(compactdisc read-only memory，CD-ROM)或其它光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其它磁存储设备，或者是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其它介质，但不限于此。可选地，存储器802独立存在，并通过内部连接804与处理器801相连接。或者，可选地存储器802和处理器801集成在一起。

网络接口803使用任何收发器一类的装置，用于与其它设备或通信网络通信。网络接口803例如包括有线网络接口或者无线网络接口中的至少一项。其中，有线网络接口例如为以太网接口。以太网接口例如是光接口，电接口或其组合。无线网络接口例如为无线局域网(wireless local area networks，WLAN)接口，蜂窝网络网络接口或其组合等。

在一些实施例中，处理器801包括一个或多个CPU，如附图13中所示的CPU0和CPU1。

在一些实施例中，计算设备800可选地包括多个处理器，如附图13中所示的处理器801和处理器805。这些处理器中的每一个例如是一个单核处理器(single-CPU)，又如是一个多核处理器(multi-CPU)。这里的处理器可选地指一个或多个设备、电路、和/或用于处理数据(如计算机程序指令)的处理核。

在一些实施例中，计算设备800还包括内部连接804。处理器801、存储器802以及至少一个网络接口803通过内部连接804连接。内部连接804包括通路，在上述组件之间传送信息。可选地，内部连接804是单板或总线。可选地，内部连接804分为地址总线、数据总线、控制总线等。

在一些实施例中，计算设备800还包括输入输出接口806。输入输出接口806连接到内部连接804上。

在一些实施例中，输入输出接口806用于与输入设备连接，接收用户通过输入设备输入的上述附图2所示方法涉及的命令或数据，例如构建请求、坐标轴属性、用于生成可视化视图的代码、图表之间的嵌套关系、图符种类、图表或图符的参数。输入设备包括但不限于键盘、触摸屏、麦克风、鼠标或传感设备等等等。

在一些实施例中，输入输出接口806还用于与输出设备连接。输入输出接口806通过输出设备输出处理器301执行上述附图2所示方法产生的中间结果和/或最终结果，例如可视化视图、用于生成可视化视图的代码、根据对可视化视图的配置操作产生的代码、构建界面。输出设备包括但不限于显示器、打印机、投影仪等等。在一个可选地实施例中，输入输出接口806将可视化视图输出至显示器，显示器显示可视化视图。

可选地，处理器801通过读取存储器802中保存的程序代码810实现上述实施例中的方法，或者，处理器801通过内部存储的程序代码实现上述实施例中的方法。在处理器801通过读取存储器802中保存的程序代码810实现上述实施例中的方法的情况下，存储器802中保存实现本申请实施例提供的可视化视图的构建方法的程序代码。

处理器801实现上述功能的更多细节请参考前面各个方法实施例中的描述，在这里不再重复。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分可互相参考，每个实施例重点说明的都是与其他实施例的不同之处。

A参考B，指的是A与B相同或者A为B的简单变形。

本申请实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序，也不能理解为指示或暗示相对重要性。例如，第一图表和第二图表用于区别不同的图表，而不是用于描述图表的特定顺序，也不能理解为第一图表比第二图表更重要。

本申请实施例，除非另有说明，“至少一个”的含义是指一个或多个，“多个”的含义是指两个或两个以上。例如，多个图表是指两个或两个以上的图表。

上述实施例可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例描述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘SolidState Disk(SSD))等。

以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (27)

1.一种可视化视图的构建方法，其特征在于，所述方法包括：

接收构建请求，所述构建请求指示构建第一图表的可视化视图，所述第一图表绑定的图符包括第二图表；

根据所述第一图表的坐标轴属性，获取所述第二图表的第一布局参数；

根据所述第一布局参数，获取所述第一图表的可视化视图，所述可视化视图包括所述第一图表和所述第二图表，所述可视化视图中所述第二图表按照所述第一布局参数排列；

提供所述可视化视图。

2.根据权利要求1所述的方法，其特征在于，所述根据所述第一图表的坐标轴属性，获取所述第二图表的第一布局参数，包括：

根据所述第一图表的坐标轴属性，获取所述第二图表的基准布局参数；

对所述基准布局参数进行调整，得到所述第一布局参数。

3.根据权利要求2所述的方法，其特征在于，所述对所述基准布局参数进行调整，得到所述第一布局参数，包括：

根据所述第二图表的位置坐标、位移或角度，对所述基准布局参数进行调整，得到所述第一布局参数；或者，

根据所述第一图表的力引导属性，对所述基准布局参数进行调整，得到所述第一布局参数。

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述第二图表绑定的图符包括第三图表，所述根据所述第一布局参数，获取所述第一图表的可视化视图，包括：

根据所述第三图表在所述第二图表中的位置和所述第二图表在所述第一图表中的位置，获取所述第三图表在所述可视化视图中的位置。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述方法还包括：

响应于第一更新指令，对所述第一图表的坐标轴属性进行更新；

根据所述第一图表更新后的坐标轴属性，获取所述第二图表的第二布局参数；

根据所述第二布局参数，对所述可视化视图中所述第二图表的布局进行更新。

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

响应于关系互换指令，根据所述第二图表的坐标轴属性，获取第三布局参数，所述关系互换指令指示对所述第一图表与所述第二图表的父子关系互换；

根据所述第三布局参数对所述可视化视图进行更新，更新后的可视化视图中所述第一图表按照所述第三布局参数排列。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述方法还包括：

响应于第二更新指令，获取所述第二图表更新后的位置坐标；

根据所述第二图表更新后的位置坐标，对所述可视化视图进行更新。

8.根据权利要求1至7中任一项所述的方法，其特征在于，所述提供所述可视化视图，包括：

提供构建界面，所述构建界面包括所述可视化视图和代码区域，所述代码区域用于对生成所述可视化视图的第一代码进行展示。

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

响应于代码导出指令，将所述代码区域中所述第一代码输出至目标位置。

10.根据权利要求8或9所述的方法，其特征在于，所述方法还包括：

响应于代码运行指令，通过运行在所述代码区域中输入的第二代码，对所述可视化视图进行调整。

11.根据权利要求8至10中任一项所述的方法，其特征在于，所述方法还包括：

响应于所述构建界面上触发的对所述可视化视图的属性设定操作，获取所述属性设定操作对应的第三代码；

将所述第三代码增加至所述构建界面中的所述代码区域。

12.根据权利要求8至11中任一项所述的方法，其特征在于，所述构建界面还包括层次视图，所述层次视图用于展示所述第一图表的层次结构图，所述层次结构图中所述第二图表位于所述第一图表的下层。

13.根据权利要求1至12中任一项所述的方法，其特征在于，所述提供所述可视化视图，包括：

响应于对所述第一图表的隐藏指令，提供所述第一图表处于隐藏状态的可视化视图；或者，

响应于对所述第二图表的隐藏指令，提供所述第二图表处于隐藏状态的可视化视图。

14.根据权利要求1至13中任一项所述的方法，其特征在于，所述提供所述可视化视图，包括：

向所述构建请求的发起方发送所述可视化视图的内容；或者，

在构建界面中显示所述可视化视图。

15.一种可视化视图的构建装置，其特征在于，所述可视化视图的构建装置包括：

通信模块，用于接收构建请求，所述构建请求指示构建第一图表的可视化视图，所述第一图表绑定的图符包括第二图表；

布局计算模块，用于根据所述第一图表的坐标轴属性，获取所述第二图表的第一布局参数；

视图生成模块，用于根据所述第一布局参数，获取所述第一图表的可视化视图，所述可视化视图包括所述第一图表和所述第二图表，所述可视化视图中所述第二图表按照所述第一布局参数排列；

所述通信模块，还用于提供所述可视化视图。

16.根据权利要求15所述的可视化视图的构建装置，其特征在于，所述布局计算模块，用于根据所述第一图表的坐标轴属性，获取所述第二图表的基准布局参数；对所述基准布局参数进行调整，得到所述第一布局参数。

17.根据权利要求16所述的可视化视图的构建装置，其特征在于，所述布局计算模块，用于根据所述第二图表的位置坐标、位移或角度，对所述基准布局参数进行调整，得到所述第一布局参数；或者，根据所述第一图表的力引导属性，对所述基准布局参数进行调整，得到所述第一布局参数。

18.根据权利要求15至17中任一项所述的可视化视图的构建装置，其特征在于，所述第二图表绑定的图符包括第三图表，所述布局计算模块，用于根据所述第三图表在所述第二图表中的位置和所述第二图表在所述第一图表中的位置，获取所述第三图表在所述可视化视图中的位置。

19.根据权利要求15至18中任一项所述的可视化视图的构建装置，其特征在于，所述布局计算模块，还用于响应于所述通信模块接收的第一更新指令，对所述第一图表的坐标轴属性进行更新；根据所述第一图表更新后的坐标轴属性，获取所述第二图表的第二布局参数；所述视图生成模块，还用于根据所述第二布局参数，对所述可视化视图中所述第二图表的布局进行更新。

20.根据权利要求15至19中任一项所述的可视化视图的构建装置，其特征在于，

所述布局计算模块，还用于响应于所述通信模块接收的关系互换指令，根据所述第二图表的坐标轴属性，获取第三布局参数，所述关系互换指令指示对所述第一图表与所述第二图表的父子关系互换；

所述视图生成模块还用于根据所述第三布局参数对所述可视化视图进行更新，更新后的可视化视图中所述第一图表按照所述第三布局参数排列。

21.根据权利要求15至20中任一项所述的可视化视图的构建装置，其特征在于，

所述布局计算模块，还用于响应于所述通信模块接收的第二更新指令，获取所述第二图表更新后的位置坐标；

所述视图生成模块还用于用于根据所述第二图表更新后的位置坐标，对所述可视化视图进行更新。

22.根据权利要求15至21中任一项所述的可视化视图的构建装置，其特征在于，所述通信模块，用于提供所述视图生成模块生成的构建界面，所述构建界面包括所述可视化视图和代码区域，所述代码区域用于对生成所述可视化视图的第一代码进行展示。

23.根据权利要求22所述的可视化视图的构建装置，其特征在于，所述通信模块还用于响应于所述通信模块接收的代码导出指令，将所述代码区域中所述第一代码输出至目标位置。

24.根据权利要求22或23所述的可视化视图的构建装置，其特征在于，所述视图生成模块还用于响应于所述通信模块接收的代码运行指令，通过运行在所述代码区域中输入的第二代码，对所述可视化视图进行调整。

25.根据权利要求22至24中任一项所述的可视化视图的构建装置，其特征在于，所述装置还包括：代码获取模块，用于响应于所述构建界面上触发的对所述可视化视图的属性设定操作，获取所述属性设定操作对应的第三代码；

所述视图生成模块还用于将所述第三代码增加至所述构建界面中的所述代码区域。

26.一种计算设备，其特征在于，所述计算设备包括处理器和存储器，其中：

所述存储器中存储有计算机指令；

所述处理器执行所述计算机指令，以实现所述权利要求1至14中任一项权利要求所述的方法。

27.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述指令在计算机上运行时，使得计算机执行如权利要求1至权利要求14中任一项所述的方法。

Images