一种可视化动态配置生成图表的系统及方法技术方案

本发明专利技术公开了一种可视化动态配置生成图表的系统及方法，该系统包括设有表单配置区、图表渲染区及配置代码展示区的可视化编辑界面、操作行为监听器及配置参数校验单元。该方法包括：根据基础配置区所输入的基础配置参数，加载渲染出对应的参数配置区；监听表单配置区的表单中所确定输入的图表配置参数；图表渲染区根据监听到的图表配置参数，渲染出对应的图表；配置代码展示区根据监听到的图表配置参数，生成展示出对应的配置代码。本发明专利技术操作方便快捷，适用于无前端开发基础人员使用，降低了前端图表配置生成操作的门槛，且扩充了可视化前端配置工具的功能点。本发明专利技术作为一种可视化动态配置生成图表的系统及方法可广泛应用于前端设计领域中。

A system and method for visualizing dynamic configuration and generating graphs

The invention discloses a system and a method for visualizing dynamic configuration to generate charts. The system includes a visual editing interface with a form configuration area, a chart rendering area, and a configuration code display area, an operation behavior listener and a configuration parameter checking unit. The method includes: basic configuration parameters according to the basic configuration of the input loading, rendering the corresponding parameter configuration; chart configuration parameters determined by monitoring the input form configuration in the form region; chart rendering area according to the configuration parameters to monitor chart, rendering the corresponding chart; the configuration code display area according to the graph configuration parameters listen to the show, generate the corresponding configuration code. The invention is convenient and quick to operate, and is suitable for the use of basic personnel without front-end development, reduces the threshold of the front end chart configuration operation, and extends the function point of the visualization front end configuration tool. The system and method of the invention, as a visual dynamic configuration, can be widely used in the front-end design field.

【技术实现步骤摘要】
一种可视化动态配置生成图表的系统及方法
本专利技术涉及图表处理技术，尤其涉及一种可视化动态配置生成图表的系统及方法。
技术介绍
技术词解释：图表：图表泛指在屏幕中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键性作用的图形结构，是一种很好的将对象属性数据直观、形象地“可视化”的手段。表单：HTML中的元素，包括不同类型的input元素、复选框、单选按钮、提交按钮等等。近几年，随着前端数据的发展和人们对大数据的重视，各种大数据图表展示工具越来越多地出现在开发者的视野中，如百度的echarts、HIGHSOFT公司的highcharts、InfoSoftGlobal公司的FusionCharts等优秀的前端图表工具。由于目前常用的各种优秀的前端图表工具的直接使用是需要具备前端技术开发功底，所以这就将大量的没有开发功底的人员拒绝于门外。然而，在现实的生产工作中，存在很多的无前端开发能力的人员也需要使用到动态编辑的图表工具来进行图表的配置生成，如在网站上编辑业务报告、大数据实时监听反馈可视化呈现等。可见，在实际应用场景上，无开发经验的人员比有开发经验的群体多，且在实际应用的场景远比开发场景大。因此如何制定合理、可行、科学、且能够适用于无前端开发基础人员的前端图表配置生成方案具有重要的意义。
技术实现思路
为了解决上述技术问题，本专利技术的第一目的是提供一种能够适用于无前端开发基础人员使用的前端可视化动态配置生成图表的系统。本专利技术的第二目的是提供一种能够适用于无前端开发基础人员使用的前端可视化动态配置生成图表的方法。本专利技术所采用的技术方案是：一种可视化动态配置生成图表的系统，该系统包括：可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。进一步，所述配置参数校验单元具体包括：提示模块，用于对参数配置区中的表单进行填写提示；校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。进一步，所述监听校验方式包括必填校验、文本格式校验和/或范围校验。进一步，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。进一步，所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。进一步，所述操作行为监听器具体包括：第一监听模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；第二监听模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；和/或，第三监听模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。本专利技术所采用的另一技术方案是：一种可视化动态配置生成图表的方法，该方法包括以下步骤：操作行为监听器监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单，并且配置参数校验单元对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验；监听表单配置区的表单中所确定输入的图表配置参数；其中，所述表单配置区包含基础配置区和参数配置区，所述图表配置参数包含基础配置区中所输入的基础配置参数以及参数配置区中所输入的配置信息；图表渲染区根据监听得到的图表配置参数，渲染出对应的图表；配置代码展示区根据监听得到的图表配置参数，展示出对应的配置代码。进一步，所述对参数配置区中的表单所输入的配置信息进行监听校验这一步骤，其具体包括以下子步骤：遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。进一步，所述监听校验方式包括必填校验、文本格式校验和/或范围校验。进一步，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。进一步，所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。进一步，所述根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单这一步骤，其包括以下子步骤：当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；和/或，当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。本专利技术方法及系统的有益效果是：通过使用本专利技术的系统及方法，能够以可视化的表单操作方式来实现对第三方图表工具的编辑操作，实时生成用户所需的图表，操作方便快捷，适用于无前端开发基础人员使用，大大降低了前端图表配置生成操作的门槛，而且本专利技术的系统及方法还能兼容适用于可视化前端配置工具中，解决传统可视化前端配置工具中无法生成图表的功能，扩充了可视化前端配置工具的功能点。附图说明图1是本专利技术一种可视化动态配置生成图表的方法的步骤流程示意图；图2是本专利技术一种可视化动态配置生成图表的系统一具体实施例的实现步骤流程示意图；图3是可视化编辑界面示意图。具体实施方式实施例1一种可视化动态配置生成图表的系统，该系统包括：可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。进一步作为优选的实施方式，所述配置参数校验单元具体包括：提示模块，用于对参数配置区中的表单进行填写提示；校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听本文档来自技高网...

【技术保护点】
一种可视化动态配置生成图表的系统，其特征在于：该系统包括：可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。

【技术特征摘要】
1.一种可视化动态配置生成图表的系统，其特征在于：该系统包括：可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。2.根据权利要求1所述一种可视化动态配置生成图表的系统，其特征在于：所述配置参数校验单元具体包括：提示模块，用于对参数配置区中的表单进行填写提示；校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。3.根据权利要求2所述一种可视化动态配置生成图表的系统，其特征在于：所述监听校验方式包括必填校验、文本格式校验和/或范围校验。4.根据权利要求1-3任一项所述一种可视化动态配置生成图表的系统，其特征在于：所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。5.根据权利要求4所述一种可视化动态配置生成图表的系统，其特征在于：所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。6.根据权利要求5所述一种可视化动态配置生成图表的系统，其特征在于：所述操作行为监听器具体包括：第一监听模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载...

【专利技术属性】
技术研发人员：孔祥明，陈洁，林悦洁，
申请(专利权)人：广东广业开元科技有限公司，
类型：发明
国别省市：广东,44