一种图表配置方法、装置、电子设备及存储介质

技术领域

本发明涉及数据可视化技术领域，尤其涉及一种图表配置方法、装置、电子设备及存储介质。

背景技术

随着WEB前端技术的飞速发展，数据可视化技术可借助人脑的视觉思维能力，帮助人们直观地理解大量的数据信息，发现数据中隐含的规律，从而提高数据的使用效率。

毫无疑问，前端数据图表可视化是让大量数据变得易于理解的最有效的方式；但是，目前前端数据可视化方法需要设计人员与前端开发人员之间反复沟通才能够实现前端数据的图表可视化，图表可视化效率低。

发明内容

本发明提供了一种图表配置方法、装置、电子设备及存储介质，以提高前端数据图表可视化的可视化效率。

根据本发明的一方面，提供了一种图表配置方法，其特征在于，包括：

获取图表数据，确定所述图表数据的数据结构和数据类型；

基于所述数据结构和数据类型确定适用于所述图表数据的图表类型，并基于所述图表类型与预设图表模板库匹配对应的图表模板；

根据所述图表模板和所述图表数据形成目标图表，并将所述目标图表展示在展示界面上。

根据本发明的另一方面，提供了一种图表配置装置，其特征在于，包括：

图表数据获取模块用于获取图表数据，确定所述图表数据的数据结构和数据类型；

图表模板确定模块用于基于所述数据结构和数据类型确定适用于所述图表数据的图表类型，并基于所述图表类型与预设图表模板库匹配对应的图表模板；

目标图表形成模块用于根据所述图表模板和所述图表数据形成目标图表，并将所述目标图表展示在展示界面上。

根据本发明的另一方面，提供了一种电子设备，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例所述的图表配置方法。

根据本发明的另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现本发明任一实施例所述的图表配置方法。

本发明实施例的技术方案，通过图表数据和图表模板配置生成目标图表，图表设计人员与开发人员之间无需过多的沟通，提高了前端数据图表可视化的可视化效率。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

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

图1是本发明实施例一提供了一种图表配置方法的流程图；

图2是本发明实施例二提供的一种图表配置装置的结构示意图；

图3是本发明实施例三提供的一种电子设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例一

图1是本发明实施例一提供了一种图表配置方法的流程图，本实施例可适用于在前端开发过程中前端数据图表可视化的情况，该方法可以由图表配置装置来执行，该图表配置装置可以采用硬件和/或软件的形式实现，该图表配置装置可配置于本发明实施例提供的电子设备中。如图1所示，该方法包括：

S110、获取图表数据，确定所述图表数据的数据结构和数据类型。

其中，图表数据是用于生成可视化图表的数据。本实施例中，获取图表数据，并确定图表数据的数据结构和数据类型；其中，数据类型包括但不限于数值类型、比例类型等，这里不做限定；数据结构包括数据之间的逻辑结构和物理结构。可选的，可以基于数据分析模型确定图表数据的数据结构和数据类型，具体的，将图表数据输入至数据分析模型中，输出图表数据的数据结构和数据类型；其中，数据分析模型包括但不限于神经网络模型、机器学习模型等，这里不做限定。

在上述实施例的基础上，可选的，在所述获取图表数据之前，所述方法还包括：接收文件上传组件上传的图表数据文件，并将所述图表数据文件中的图表数据存储于数据库中；相应的，所述获取图表数据文件，包括：读取所述数据库中的所述图表数据。

其中，图表数据文件是指生成可视化图表的数据文件，具体的，图表数据文件可以是Excel文件，这里不做限定。本实施例中，接收用户通过文件上传组件上传的图表数据文件，并将图表数据文件中的图表数据存储于数据库中；在配置可视化图表的过程中，读取数据库中的图表数据，并确定图表数据的数据类型和数据结构。

S120、基于所述数据结构和数据类型确定适用于所述图表数据的图表类型，并基于所述图表类型与预设图表模板库匹配对应的图表模板。

其中，图表类型是指配置生成的可视化图表的类型，具体的，图表类型包括但不限于柱状图、饼图、直方图、漏斗图等，这里不做限定。本实施例中，基于数据结构和数据类型确定适用于图表数据的图表类型，将确定的图表类型与预设的图表模板库进行匹配，得到与图表类型对应的图表模板；其中，预设图表模板库为各图表类型的图表模板形成的模板库，图表模板包括但不限于柱状图模板、饼图模板、直方图模板、漏斗图模板等，这里不做限定。

在上述实施例的基础上，可选的，在基于所述数据结构和数据类型确定适用于所述图表数据的图表类型之前，所述方法还包括：根据功能属性对图表类型进行分类，得到图表大类，其中，所述图表大类包括趋势型、对比型、分布型、占比型、结构型、关联型和离群型；任一所述图表大类包括至少一种所述图表类型；所述基于所述数据结构和数据类型确定适用于所述图表数据的图表类型，包括：将所述图表数据的数据结构和数据类型与各所述图表大类进行匹配，得到至少一种适用于所述图表数据的所述图表类型。

其中，图表大类是指根据各图表类型功能属性划分的图表类型的大类；具体的，图表大类包括但不限于趋势型、对比型、分布型、占比型、结构型、关联型、离群型等，这里不做限定；其中，趋势型包括但不限于折线图、面积图等，用于表示数值类型数据随着连续时间间隔或有序类别发生的变化，也可用于多个系列数据的比较；对比型包括但不限于柱状图、雷达图等，用于对不同类别进行数值比较，也可以用于在多个变量间进行对比，查看变量中是否有异常的值；分布型主要包括但不限于直方图等，用于表示数据的分布情况，看似与柱状图相像，实则完全不同，从数据结构来说，柱状图是需要1个分类变量，而直方图的数据是连续的数值变化；占比型包括但不限于饼状图，用于展现及对比各类数值的占比情况；结构型包括但不限于漏斗图、甘特图、树图等，用于单个或多个流程的分析，可直观地看出流程中各部分的占比，发现流程中的异常，从而进行决策处理；关联型包括但不限于散点图、气泡图等，用于将所有的数据以点的形式展现在平面直角坐标系上，例如散点图通常用于显示和比较数值，气泡图用于展示和比较数据之间的关系和分布，通过比较气泡位置和大小来分析数据维度之间的相关性；离群型包括但不限于热力图，通过颜色表现数值的大小，可以直观地看到数据密集情况，或者用来表达活跃程度，显示多个变量之间的差异。

本实施例中，在确定图表类型之前，根据各图表类型的功能属性对图表类型进行分类，得到多个图表大类；在确定图表类型的过程中，将图表数据的数据结构和数据类型与各图表大类进行匹配，得到至少一种适用于图表数据的图表类型。示例性的，若图表数据为按时间排列的多个数值数据，则图表类型确定为趋势型中的折线图；若图表数据为多个地域的销售数据对比统计，则图表类型确定为对比型中的柱状图。

在上述实施例的基础上，可选的，所述基于所述图表类型与预设图表模板库匹配对应的图表模板，包括：响应于对匹配的所述图表类型的选择操作，确定所述图表类型，将所述图表类型与预设图表模板库进行匹配，得到对应的图表模板。

本实施例中，在匹配的图表类型为多种图表类型的情况下，需要在匹配的多种图表类型中选择要进行配置的数据图表的图表类型，具体的，响应于对匹配的图表类型的选择操作，确定进行配置的图表类型，进而将该图表类型与预设的图表模板库进行匹配，得到与图表类型匹配的图表模板。

S130、根据所述图表模板和所述图表数据形成目标图表，并将所述目标图表展示在展示界面上。

其中，目标图表是指配置完成后的数据图表。本实施例中，基于图表数据和对应的图表模板形成初始图表，进而对初始图表进行配置得到目标图表，将目标图表展示在展示界面上；其中，初始图表为基于图表数据和对应的图表模板自动生成的数据图表。

在上述实施例的基础上，可选的，所述图表模板包括图表配置项；所述根据所述图表模板和所述图表数据形成目标图表，包括：根据所述图表模板和所述图表数据形成初始图表；响应于对所述图表配置项的设置操作，对所述初始图表进行图表配置得到所述目标图表。

其中，图表配置项是指对初始图表进行配置的配置项，具体的，图表配置项包括图表功能配置项和图表风格配置项，图表功能配置项包括但不限于数值单位配置项、图例配置项、坐标轴配置项、系列数据值配置项等，这里不做限定；图表风格配置项包括但不限于字体大小、画布尺寸、系列颜色、图线样式等配置项，这里不做限定。本实施例中，根据图表模板和图表数据生成初始图表，响应于用户对各图表功能配置项的设置操作，对初始图表进行功能配置，响应于用户对各图表风格配置项的设置操作，对初始图表进行风格配置，得到目标图表。可以理解的是，在进行配置时，用户可实时查看图表的渲染效果，以便于进行调整。

在上述实施例的基础上，可选的，在所述目标图表配置完成之后，所述方法还包括：响应于对所述目标图表的导出操作，导出所述目标图表的图表预览图。或者，响应于对前端开发框架的选择操作，生成对应代码格式的所述目标图表的图表代码。

本实施例中，在目标图表配置完成后，响应于对目标图表的导出/下载操作，导出/下载目标图表的图表预览图，设计人员可以直接放入设计人员的设计稿中；相应的，响应于开发人员对前端开发框架的选择操作，生成对应代码格式的目标图表的图表代码；具体的，将当前开发框架下的目标图表的图表代码解析为抽象语法树，经过遍历和分析转换对抽象语法树进行处理，基于处理后的抽象语法树生成与所选择的前端开发框架对应的图表代码；其中，当前开发框架是指基于图表配置方法实现的图表配置工具的前端开发框架，前端开发框架包括但不限于React、Vue等前端开发框架，这里不做限定；相应的，图表代码为该前端开发框架对应的代码格式的前端代码。本实施例通过配置完成的目标图表直接获取目标图表的预览图和目标图表的图表代码，提高了前端开发的开发效率。

本发明实施例的技术方案，获取图表数据，确定图表数据的数据结构和数据类型；基于数据结构和数据类型确定适用于图表数据的图表类型，并基于图表类型与预设图表模板库匹配对应的图表模板；根据图表模板和图表数据形成目标图表，并将目标图表展示在展示界面上。通过图表数据和图表模板配置生成目标图表，图表设计人员与开发人员之间无需过多的沟通，提高了前端数据图表可视化的可视化效率。

实施例二

图2是本发明实施例二提供的一种图表配置装置的结构示意图。如图2所示，该装置包括：

图表数据获取模块210用于获取图表数据，确定所述图表数据的数据结构和数据类型；

图表模板确定模块220用于基于所述数据结构和数据类型确定适用于所述图表数据的图表类型，并基于所述图表类型与预设图表模板库匹配对应的图表模板；

目标图表形成模块230用于根据所述图表模板和所述图表数据形成目标图表，并将所述目标图表展示在展示界面上。

在上述实施例的基础上，可选的，在所述获取图表数据之前，该装置还包括图表数据存储模块，用于接收文件上传组件上传的图表数据文件，并将所述图表数据文件中的图表数据存储于数据库中；相应的，图表数据获取模块210具体用于读取所述数据库中的所述图表数据，确定所述图表数据的数据结构和数据类型。

在上述实施例的基础上，可选的，在基于所述数据结构和数据类型确定适用于所述图表数据的图表类型之前，该装置还包括图表类型分类模块，用于根据功能属性对图表类型进行分类，得到图表大类，其中，所述图表大类包括趋势型、对比型、分布型、占比型、结构型、关联型和离群型；任一所述图表大类包括至少一种所述图表类型；相应的，图表模板确定模块220包括图表类型确定单元，用于将所述图表数据的数据结构和数据类型与各所述图表大类进行匹配，得到至少一种适用于所述图表数据的所述图表类型

在上述实施例的基础上，可选的，图表模板确定模块220包括图表模板匹配单元，用于响应于对匹配的所述图表类型的选择操作，确定所述图表类型，将所述图表类型与预设图表模板库进行匹配，得到对应的图表模板。

在上述实施例的基础上，可选的，所述图表模板包括图表配置项，相应的，目标图表形成模块230具体用于根据所述图表模板和所述图表数据形成初始图表；响应于对所述图表配置项的设置操作，对所述初始图表进行图表配置得到所述目标图表。

在上述实施例的基础上，可选的，所述图表配置项包括图表功能配置项和图表风格配置项。

在上述实施例的基础上，可选的，在所述目标图表配置完成之后，该装置还包括导出模块，具体的，导出模块包括图表预览图导出单元和图表代码生成单元，图表预览图导出单元用于响应于对所述目标图表的导出操作，导出所述目标图表的图表预览图；图表代码生成单元用于响应于对前端开发框架的选择操作，生成对应代码格式的所述目标图表的图表代码。

本发明实施例所提供的图表配置装置可执行本发明任意实施例所提供的图表配置方法，具备执行方法相应的功能模块和有益效果。

实施例三

图3是本发明实施例三提供的一种电子设备的结构示意图。电子设备10旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

如图3所示，电子设备10包括至少一个处理器11，以及与至少一个处理器11通信连接的存储器，如只读存储器(ROM)12、随机访问存储器(RAM)13等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序，来执行各种适当的动作和处理。在RAM 13中，还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。

电子设备10中的多个部件连接至I/O接口15，包括：输入单元16，例如键盘、鼠标等；输出单元17，例如各种类型的显示器、扬声器等；存储单元18，例如磁盘、光盘等；以及通信单元19，例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理，例如图表配置方法。

在一些实施例中，图表配置方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元18。在一些实施例中，计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时，可以执行上文描述的图表配置方法的一个或多个步骤。备选地，在其他实施例中，处理器11可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行图表配置方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明的图表配置方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

实施例四

本发明实施例四还提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使处理器执行一种图表配置方法，该方法包括：

获取图表数据，确定图表数据的数据结构和数据类型；基于数据结构和数据类型确定适用于图表数据的图表类型，并基于图表类型与预设图表模板库匹配对应的图表模板；根据图表模板和图表数据形成目标图表，并将目标图表展示在展示界面上。

在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。