CN109542438A - 一种基于可视化的图表开发方法 - Google Patents

Abstract

本发明提供一种基于可视化的图表开发方法，包括以下步骤：S1，可视化选择图表类型；S2，对话框配置图表数据源与样式；S3，将图表模型转换为XML元数据模型；S4，通过适配器代码将XML元数据模型解析成对应框架的JSON配置；S5，生成图表网页代码；S6，进行网页展示。本发明通过可视化方式进行图表开发、数据源绑定、样式配置等，降低了图表的开发难度；提高了开发人员开发效率；并通过适配器处理，实现了不同图表框架之间的相互兼容，提高了图表的灵活扩展性。

Description

一种基于可视化的图表开发方法

技术领域

本发明涉及计算机技术领域，具体的说是一种基于可视化的图表开发方法。

背景技术

目前，基于前端网页图表开发过程一般都是基于前端图表框架，然后通过异步请求获取后台数据，再手动编码生成图表框架所需要的JSON配置，将生成的JSON配置放入图表框架，实现图表生成。这种开发模式的图表代码杂乱，开发效率低下，不利用网页代码后期维护，图表框架的更改可能导致全部代码的重新编写，最终会使开发效率低下，不利于后期维护性与扩展性。

发明内容

针对现有技术中存在的上述不足之处，本发明要解决的技术问题是提供一种基于可视化的图表开发方法。

本发明为实现上述目的所采用的技术方案是：一种基于可视化的图表开发方法，包括以下步骤：

S1，可视化选择图表类型；

S2，对话框配置图表数据源与图表样式；

S3，将图表模型转换为XML元数据模型；

S4，通过适配器代码将XML元数据模型解析成对应框架的JSON配置；

S5，生成图表网页代码；

S6，进行网页展示。

所述图表类型包括柱状图、饼状图、线性图、面积图、圆环图、条形图、散点图、堆叠图、仪表盘、漏斗图、雷达图、K线图中的一种或若干种。

所述图表数据源包括SQL查询脚本或JAVA类名。

所述配置图表数据源包括：如果图表数据源是SQL查询脚本，则通过SQL查询脚本执行来获取数据源；如果图表数据源是JAVA类名，则通过自定义JAVA类名实现多种数据源接入。

所述图表样式包括主标题、副标题、图例、背景色、提示信息、画布、x轴、y轴中的一种或若干种。

所述通用XML元数据模型包括：图表数据源对应的XML模型，图表样式对应的XML模型。

所述S5是在网页代码中，将生成的JSON配置放入对应的图表框架入口，最终生成完整的图表网页代码。

本发明具有以下优点及有益效果：

1、本发明通过可视化图表开发方式，降低了开发难度，增加了图表开发的灵活性与扩展性。

2、本发明提高了开发人员效率，并通过适配器处理，实现了不同图表框架之间的相互兼容，提高了图表的灵活性，降低了开发成本。

附图说明

图1是本发明的步骤流程图；

图2是本发明中使用步骤流程图。

具体实施方式

下面结合附图及实施例对本发明做进一步的详细说明。

如图1所示，本发明提供一种基于可视化的图表开发方法，包含以下步骤：

S1，可视化选择图表类型(人工选择)；

S2，对话框配置图表数据源与样式；

S3，通过xstream开源技术将图表模型转换为XML元数据模型；

S4，通过适配器代码将XML解析成对应框架的JSON配置；

S5，生成图表网页代码；

S6，进行网页展示。

优选的，S1中所述的图表类型包括柱状图、饼状图、线性图、面积图、圆环图、条形图、散点图、堆叠图、仪表盘、漏斗图、雷达图、K线图；

优选的，S2所述对话框配置包括：

1)图表数据源配置，图表数据源配置，如果图表数据源是SQL查询脚本，可通过SQL查询脚本执行来获取数据源，如果图表数据源是JAVA类名，则可通过自定义JAVA类名实现多种数据源接入；

2)图表样式配置，如主标题、副标题、图例、背景色、提示信息、画布、x轴、y轴等。

优选的，S3所述通用XML元数据模型包括：

1)数据源XML元数据模型，通过它的解析可为图表提供数据来源；

2)样式XML元数据模型，通过它的解析，可为图表提供样式配置相关信息。

优选的，S4所述是通过适配器代码来转化通用XML元数据模型，将XML元数据模型生成前端框架中图表所需的JSON配置。

优选的，S5所述是在网页代码中，将生成的JSON配置放入对应的图表框架入口，最终生成完整的图表网页代码。

实施例：

一种基于可视化的图表开发方法，包含以下步骤：

S1，可视化选择图表类型；图表类型包括柱状图、饼状图、线性图、面积图、圆环图、条形图、散点图、堆叠图、仪表盘、漏斗图、雷达图、K线图。

S2，对话框配置图表数据源与样式；对话框包括以下配置：图表数据源配置，如果图表数据来源SQL查询脚本，可通过SQL查询脚本执行来获取数据源，如果图表数据来源是JAVA类名，则可通过自定义JAVA类名实现多种数据源接入；图表样式配置，如标题、图例、背景色等。

S3，生成图表通用XML元数据模型；XML模型包括：数据源XML模型，通过它的解析可为图表提供数据来源；样式XML模型，通过它的解析，可为图表提供样式配置相关信息。

S4，通过适配器代码将XML解析成对应框架的JSON配置；通过适配器代码来转化通用XML模型，将XML模型生成前端框架中图表所需的JSON配置。

S5，生成图表网页代码；将生成的JSON配置放入对应的图表框架入口，最终生成完整的图表网页代码。

S6，进行网页展示。

开发使用方式具体流程包含以下步骤，具体如附图2所示：

1)新建图表，建立一个图表文件；

2)可视化选择图表类型；

3)数据源配置，进行图表数据来源SQL查询脚本或JAVA类名配置；

4)样式配置，进行图表标题、图例、背景等样式配置；

5)生成通用XML模型

6)通过适配器代码将XML解析成对应框架的JSON配置；

7)将JSON配置放入图表网页对应位置，生成网页代码。

8)浏览访问，进行图表界面展示。

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

Claims (7)

1.一种基于可视化的图表开发方法，其特征在于，包括以下步骤：

S1，可视化选择图表类型；

S2，对话框配置图表数据源与图表样式；

S3，将图表模型转换为XML元数据模型；

S4，通过适配器代码将XML元数据模型解析成对应框架的JSON配置；

S5，生成图表网页代码；

S6，进行网页展示。

2.根据权利要求1所述的一种基于可视化的图表开发方法，其特征在于，所述图表类型包括柱状图、饼状图、线性图、面积图、圆环图、条形图、散点图、堆叠图、仪表盘、漏斗图、雷达图、K线图中的一种或若干种。

3.根据权利要求1所述的一种基于可视化的图表开发方法，其特征在于，所述图表数据源包括SQL查询脚本或JAVA类名。

4.根据权利要求1所述的一种基于可视化的图表开发方法，其特征在于，所述配置图表数据源包括：如果图表数据源是SQL查询脚本，则通过SQL查询脚本执行来获取数据源；如果图表数据源是JAVA类名，则通过自定义JAVA类名实现多种数据源接入。

5.根据权利要求1所述的一种基于可视化的图表开发方法，其特征在于，所述图表样式包括主标题、副标题、图例、背景色、提示信息、画布、x轴、y轴中的一种或若干种。

6.根据权利要求1所述的一种基于可视化的图表开发方法，其特征在于，所述通用XML元数据模型包括：图表数据源对应的XML模型，图表样式对应的XML模型。

7.根据权利要求1所述的一种基于可视化的图表开发方法，其特征在于，所述S5是在网页代码中，将生成的JSON配置放入对应的图表框架入口，最终生成完整的图表网页代码。