可视化图表的开发方法、装置、电子设备及介质与流程

本公开涉及前端，尤其涉及一种可视化图表的开发方法、装置、电子设备及介质。

背景技术：

1、随着前端技术的发展，满足用户对数据分析利用的需求成为前端开发的一个重点。为了直观呈现数据，可以通过图、表等形式在前端进行可视化呈现。目前市面上有各种各样的图表框架(例如为各类图表可视化工具或图表库)来方便前端开发者进行利用，以在前端页面进行数据可视化展示。诸如：d3.js(d3.js是一个流行的javascript(javascript是一种脚本编程语言)数据可视化库，它提供了许多强大的可视化组件和工具，可以用来创建复杂的交互式数据可视化效果)、echart(echart是一个使用javascript实现的开源可视化库，它可以在浏览器中生成高质量的图表和地图)、highcharts(是一个基于纯javascript的图表库，支持多种图表类型，并可在多种平台上使用)、plotly.js(是一个基于webgl的图表库，可以创建交互式、可共享的图表和地图，可在任何兼容的web浏览器中渲染高性能的交互式3d和2d图形，而无需使用插件)、apexcharts(是一个响应式的svg图表库，可以创建交互式和动态的图表)、vis.js(是一个灵活的、可定制的、基于浏览器的数据可视化库，包含时间序列、网络图、关系图等)、three.js(是一个用于在网页上创建和显示3d图形的javascript库和应用程序接口)等图表可视化工具或图表库。

2、在实现本公开构思的过程中，发明人发现相关技术中至少存在如下技术问题：目前基于各类已有的可视化工具或图表库进行图表可视化呈现的开发时，需要开发人员熟悉对应使用的可视化工具或图表库并积累较多的经验，技术门槛较高，且需要根据可视化工具或图表库的更新迭代而不断持续学习，耗费较多的时间成本，导致开发周期延长，难以满足高效率开发的需求；因此相关技术中缺乏面向非经验人员或经验较少的开发人员的一种通用的、且能够提升开发效率的可视化图表开发工具或方法。

技术实现思路

1、为了解决上述技术问题或者至少部分地解决上述技术问题，本公开的实施例提供了一种可视化图表的开发方法、装置、电子设备及介质。

2、第一方面，本公开的实施例提供一种可视化图表的开发方法。上述开发方法包括：创建或选择用于进行图表呈现的目标容器；从预先构建的配置库的配置项列表中获取目标配置项列表并在开发界面展示；根据用户与上述目标配置项列表的交互信息，生成用户所需的目标配置内容；将上述目标配置内容作为传入参数，调用目标图表框架在上述目标容器中基于上述传入参数和图表数据源进行渲染，得到呈现的可视化图表。其中，上述配置项列表是通过对各个图表框架对应的预定义配置项按照统一规范进行重新定义后得到的，上述配置项列表包含配置项和对应的描述信息；上述描述信息为基于自然语言表述的针对配置项的解释性信息，上述解释性信息包含配置项索引信息和设置说明。

3、在一些实施例中，上述配置库包含至少一种图表框架对应的配置项列表；上述配置项列表中的配置项与对应的图表框架中的预定义配置项之间具有映射关系。其中，根据用户与上述目标配置项列表的交互信息，生成用户所需的目标配置内容，包括：接收用户在上述配置项列表中基于上述描述信息选择的目标配置项；获取用户针对上述目标配置项的设置信息，上述设置信息包括以下至少一种：自定义取值设置信息、默认取值设置信息；根据上述映射关系，自动将上述目标配置项转换为对应于上述目标图表框架的目标预定义配置项；根据上述设置信息和上述目标预定义配置项，生成目标配置内容。

4、在一些实施例中，调用目标图表框架在上述目标容器中基于上述传入参数和图表数据源进行渲染，得到呈现的可视化图表，包括：基于上述目标图表框架识别上述传入参数，得到目标预定义配置项和设置信息；由上述目标图表框架根据上述目标预定义配置项、上述设置信息和上述图表数据源，在上述目标容器中进行图表实例化处理，得到渲染后的可视化图表。

5、在一些实施例中，上述配置库中包含：图表框架和配置项列表之间的对应关系。其中，从预先构建的配置库的配置项列表中获取目标配置项列表，包括：基于图表框架和配置项列表之间的对应关系，获取与目标图表框架对应的目标配置项列表。

6、在一些实施例中，上述开发方法还包括：加载渲染封装工具，上述渲染封装工具包含上述预先构建的配置库，且上述渲染封装工具具有对接至目标图表框架的调用接口。其中，上述从预先构建的配置库的配置项列表中获取目标配置项列表，包括：从上述渲染封装工具中读取配置库；从上述配置库中筛选得到与上述目标图表框架对应的目标配置项列表。其中，调用目标图表框架在上述目标容器中基于上述传入参数和图表数据源进行渲染，得到呈现的可视化图表，包括：基于上述渲染封装工具中的调用接口调用上述目标图表框架，在上述目标容器中基于上述传入参数和图表数据源进行渲染，得到呈现的可视化图表。

7、在一些实施例中，上述开发方法还包括：获取目标图表框架发生版本更新的更新信息；上述更新包含对预定义配置项的更新或对所支持调用接口的更新；根据上述更新信息，确定对应的更新类型；在上述更新类型指示对预定义配置项进行更新的情况下，对上述目标配置项列表中与更新的预定义配置项相关联的关联配置项进行更新，并更新上述关联配置项与更新的预定义配置项之间的映射关系；在上述更新类型指示对所支持调用接口进行更新的情况下，根据版本更新后对所支持调用接口的更新信息，适配更新渲染封装工具中的调用接口。

8、在一些实施例中，上述更新类型包含以下的一种：新增第一预定义配置项的第一更新类型、删除第二预定义配置项的第二更新类型、更改第三预定义配置项的第二更新类型。在上述更新类型为第一更新类型的情况下，在上述目标配置项列表中新增与上述第一预定义配置项对应的第一配置项，并构建上述第一配置项与上述第一预定义配置项之间的第一映射关系。在上述更新类型为第二更新类型的情况下，在上述目标配置项列表中删除与上述第二预定义配置项对应的第二配置项，并删除上述第二配置项与上述第二预定义配置项之间的第二映射关系。在上述更新类型为第三更新类型的情况下，将更改前的第三预定义配置项与对应的第三配置项之间的映射关系更新为更改后的第三预定义配置项与上述第三配置项之间的第三映射关系。

9、在一些实施例中，上述配置项为基于前端开发语言描述的针对静态图表或动态图表至少之一的配置字段标识。上述配置项索引信息包含：以自然语言表述的配置项名称；上述设置说明包含以下至少一种：配置项属性，配置项取值的枚举信息或默认信息，配置项的设置规范。上述配置项包含：图表类型，各图表类型对应的图表组成元素的显示位置和显示样式；以及包含以下信息中的至少一组：图表交互操作功能对象，图表交互操作执行对应的显示位置和显示样式；根据数据源处理结果进行自定义显示的个性化配置对象。

10、第二方面，本公开的实施例提供一种可视化图表的开发装置。上述开发装置包括：容器创建或选择模块、配置项列表获取模块、配置模块和渲染模块。上述容器创建或选择模块用于创建或选择用于进行图表呈现的目标容器。上述配置项列表获取模块用于从预先构建的配置库的配置项列表中获取目标配置项列表并在开发界面展示。其中，上述配置项列表是通过对各个图表框架对应的预定义配置项按照统一规范进行重新定义后得到的，上述配置项列表包含配置项和对应的描述信息；上述描述信息为基于自然语言表述的针对配置项的解释性信息，上述解释性信息包含配置项索引信息和设置说明。上述配置模块用于根据用户与上述目标配置项列表的交互信息，生成用户所需的目标配置内容。上述渲染模块用于将上述目标配置内容作为传入参数，调用目标图表框架在上述目标容器中基于上述传入参数和图表数据源进行渲染，得到呈现的可视化图表。

11、第三方面，本公开的实施例提供了一种电子设备。上述电子设备包括处理器、通信接口、存储器和通信总线，其中，处理器、通信接口和存储器通过通信总线完成相互间的通信；存储器，用于存放计算机程序；处理器，用于执行存储器上所存放的程序时，实现如上所述的可视化图表的开发方法。

12、第四方面，本公开的实施例提供了一种计算机可读存储介质。上述计算机可读存储介质上存储有计算机程序，上述计算机程序被处理器执行时实现如上所述的可视化图表的开发方法。

13、本公开实施例提供的上述技术方案至少具有如下优点的部分或全部：

14、面向非经验人员或经验较少的开发人员提供了一种通用的、且能够提升开发效率的可视化图表开发方法，通过预先构建包含配置项列表的配置库，上述配置项列表是通过对各个图表框架对应的预定义配置项按照统一规范进行重新定义后得到的，即预先可以由熟悉各个图表框架的人员基于统一规范将各个图表框架对应的预定义配置项进行重新定义，由于重新定义后的配置项的描述信息为基于自然语言表述的针对配置项的解释性信息，上述解释性信息包含配置项索引信息和设置说明，基于上述描述信息中的配置项索引信息便于按照统一规范(这一统一规范针对用户而言是一个基础性的规范，在用户没有掌握图表框架的基础上也能够理解)来搜索配置项，基于上述设置说明，便于用户(例如为可视化图表的前端开发人员)查看并实时了解配置项的设置方式，无需用户提前耗费较多时间了解所要使用的图表框架的相关内容，用户在开发过程能够按照统一规范来查找、了解各个配置项的含义和设置方法并按需选择所要设置的目标配置项，无需关心底层各个图表框架中具体实现某个功能的预定义配置项叫什么，仅需要根据开发界面展示的目标配置项列表中的描述信息进行交互操作即可，降低了可视化图表开发的技术门槛，同时能够提升开发效率。