一种可视化动态配置生成图表的系统及方法.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN107918516A(43)申请公布日2018.04.17(21)申请号201710964819.3(22)申请日2017.10.17(71)申请人广东广业开元科技有限公司地址510623广东省广州市天河区珠江新城金穗路1号邦华环球广场408(72)发明人孔祥明陈洁林悦洁(74)专利代理机构广州嘉权专利商标事务所有限公司44205代理人朱晓敏胡辉(51)Int.Cl.G06F3/0484(2013.01)G06F8/34(2018.01)G06F8/38(2018.01)G06T11/20(2006.01)权利要求书2页说明书7页附图2页(54)发明名称一种可视化动态配置生成图表的系统及方法(57)摘要本发明公开了一种可视化动态配置生成图表的系统及方法，该系统包括设有表单配置区、图表渲染区及配置代码展示区的可视化编辑界面、操作行为监听器及配置参数校验单元。该方法包括：根据基础配置区所输入的基础配置参数，加载渲染出对应的参数配置区；监听表单配置区的表单中所确定输入的图表配置参数；图表渲染区根据监听到的图表配置参数，渲染出对应的图表；配置代码展示区根据监听到的图表配置参数，生成展示出对应的配置代码。本发明操作方便快捷，适用于无前端开发基础人员使用，降低了前端图表配置生成操作的门槛，且扩充了可视化前端配置工具的功能点。本发明作为一种可视化动态配置生成图表的系统及方法可广泛应用于前端设计领域中。CN107918516ACN107918516A权利要求书1/2页1.一种可视化动态配置生成图表的系统，其特征在于：该系统包括：可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。2.根据权利要求1所述一种可视化动态配置生成图表的系统，其特征在于：所述配置参数校验单元具体包括：提示模块，用于对参数配置区中的表单进行填写提示；校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。3.根据权利要求2所述一种可视化动态配置生成图表的系统，其特征在于：所述监听校验方式包括必填校验、文本格式校验和/或范围校验。4.根据权利要求1-3任一项所述一种可视化动态配置生成图表的系统，其特征在于：所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。5.根据权利要求4所述一种可视化动态配置生成图表的系统，其特征在于：所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。6.根据权利要求5所述一种可视化动态配置生成图表的系统，其特征在于：所述操作行为监听器具体包括：第一监听模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；第二监听模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；和/或，第三监听模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。7.一种可视化动态配置生成图表的方法，其特征在于：该方法包括以下步骤：操作行为监听器监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单，并且配置参数校验单元对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验；监听表单配置区的表单中所确定输入的图表配置参数；其中，所述表单配置区包含基2CN107918516A权利要求书2/2页础配置区和参数配置区，所述图表配置参数包含基础配置区中所输入的基础配置参数以及参数配置区中所输入的配置信息；图表渲染区根据监听得到的图表配置参数，渲染出对应的图表；配置代码展示区根据监听得到的图表配置参数，展示出对应的配置代码。8.根据权利要求7所述一种可视化动态配置生成图表的方法，其特征在于：所述对参数配