CN107918516A - 一种可视化动态配置生成图表的系统及方法 - Google Patents
一种可视化动态配置生成图表的系统及方法 Download PDFInfo
- Publication number
- CN107918516A CN107918516A CN201710964819.3A CN201710964819A CN107918516A CN 107918516 A CN107918516 A CN 107918516A CN 201710964819 A CN201710964819 A CN 201710964819A CN 107918516 A CN107918516 A CN 107918516A
- Authority
- CN
- China
- Prior art keywords
- configuration
- parameter
- list
- area
- chart
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种可视化动态配置生成图表的系统及方法，该系统包括设有表单配置区、图表渲染区及配置代码展示区的可视化编辑界面、操作行为监听器及配置参数校验单元。该方法包括：根据基础配置区所输入的基础配置参数，加载渲染出对应的参数配置区；监听表单配置区的表单中所确定输入的图表配置参数；图表渲染区根据监听到的图表配置参数，渲染出对应的图表；配置代码展示区根据监听到的图表配置参数，生成展示出对应的配置代码。本发明操作方便快捷，适用于无前端开发基础人员使用，降低了前端图表配置生成操作的门槛，且扩充了可视化前端配置工具的功能点。本发明作为一种可视化动态配置生成图表的系统及方法可广泛应用于前端设计领域中。
Description
技术领域
本发明涉及图表处理技术，尤其涉及一种可视化动态配置生成图表的系统及方法。
背景技术
技术词解释：
图表：图表泛指在屏幕中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键性作用的图形结构，是一种很好的将对象属性数据直观、形象地“可视化”的手段。
表单：HTML中的元素，包括不同类型的input元素、复选框、单选按钮、提交按钮等等。
近几年，随着前端数据的发展和人们对大数据的重视，各种大数据图表展示工具越来越多地出现在开发者的视野中，如百度的echarts、HIGHSOFT公司的highcharts、InfoSoft Global公司的FusionCharts等优秀的前端图表工具。由于目前常用的各种优秀的前端图表工具的直接使用是需要具备前端技术开发功底，所以这就将大量的没有开发功底的人员拒绝于门外。然而，在现实的生产工作中，存在很多的无前端开发能力的人员也需要使用到动态编辑的图表工具来进行图表的配置生成，如在网站上编辑业务报告、大数据实时监听反馈可视化呈现等。可见，在实际应用场景上，无开发经验的人员比有开发经验的群体多，且在实际应用的场景远比开发场景大。因此如何制定合理、可行、科学、且能够适用于无前端开发基础人员的前端图表配置生成方案具有重要的意义。
发明内容
为了解决上述技术问题，本发明的第一目的是提供一种能够适用于无前端开发基础人员使用的前端可视化动态配置生成图表的系统。
本发明的第二目的是提供一种能够适用于无前端开发基础人员使用的前端可视化动态配置生成图表的方法。
本发明所采用的技术方案是：一种可视化动态配置生成图表的系统，该系统包括：
可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；
操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；
配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。
进一步，所述配置参数校验单元具体包括：
提示模块，用于对参数配置区中的表单进行填写提示；
校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。
进一步，所述监听校验方式包括必填校验、文本格式校验和/或范围校验。
进一步，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
进一步，所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。
进一步，所述操作行为监听器具体包括：
第一监听模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；
第二监听模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；
和/或，
第三监听模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。
本发明所采用的另一技术方案是：一种可视化动态配置生成图表的方法，该方法包括以下步骤：
操作行为监听器监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单，并且配置参数校验单元对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验；
监听表单配置区的表单中所确定输入的图表配置参数；其中，所述表单配置区包含基础配置区和参数配置区，所述图表配置参数包含基础配置区中所输入的基础配置参数以及参数配置区中所输入的配置信息；
图表渲染区根据监听得到的图表配置参数，渲染出对应的图表；
配置代码展示区根据监听得到的图表配置参数，展示出对应的配置代码。
进一步，所述对参数配置区中的表单所输入的配置信息进行监听校验这一步骤，其具体包括以下子步骤：
遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；
当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。
进一步，所述监听校验方式包括必填校验、文本格式校验和/或范围校验。
进一步，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
进一步，所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。
进一步，所述根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单这一步骤，其包括以下子步骤：
当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；
当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；
和/或，
当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。
本发明方法及系统的有益效果是：通过使用本发明的系统及方法，能够以可视化的表单操作方式来实现对第三方图表工具的编辑操作，实时生成用户所需的图表，操作方便快捷，适用于无前端开发基础人员使用，大大降低了前端图表配置生成操作的门槛，而且本发明的系统及方法还能兼容适用于可视化前端配置工具中，解决传统可视化前端配置工具中无法生成图表的功能，扩充了可视化前端配置工具的功能点。
附图说明
图1是本发明一种可视化动态配置生成图表的方法的步骤流程示意图；
图2是本发明一种可视化动态配置生成图表的系统一具体实施例的实现步骤流程示意图；
图3是可视化编辑界面示意图。
具体实施方式
实施例1
一种可视化动态配置生成图表的系统，该系统包括：
可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；
操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；
配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。
进一步作为优选的实施方式，所述配置参数校验单元具体包括：
提示模块，用于对参数配置区中的表单进行填写提示；
校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。
进一步作为优选的实施方式，所述监听校验方式包括必填校验、文本格式校验和/或范围校验。
进一步作为优选的实施方式，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
进一步作为优选的实施方式，所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。
进一步作为优选的实施方式，所述操作行为监听器具体包括：
第一监听模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；
第二监听模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；
和/或，
第三监听模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。
上述系统实施例的内容均适用于以下的实施例。
实施例2
如图1所示，一种可视化动态配置生成图表的方法，该方法包括以下步骤：
操作行为监听器监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单，并且配置参数校验单元对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验；
监听表单配置区的表单中所确定输入的图表配置参数，当参数配置区中的所有表单校验通过时，则监听得到表单配置区的表单中所确定输入的图表配置参数；其中，所述表单配置区包含基础配置区和参数配置区，所述图表配置参数包含基础配置区中所输入的基础配置参数以及参数配置区中所输入的配置信息；
图表渲染区根据监听得到的图表配置参数，渲染出对应的图表；
配置代码展示区根据监听得到的图表配置参数，展示出对应的配置代码。
进一步作为优选的实施方式，所述对参数配置区中的表单所输入的配置信息进行监听校验这一步骤，其具体包括以下子步骤：
遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；
当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。
进一步作为优选的实施方式，所述监听校验方式包括必填校验、文本格式校验和/或范围校验。
进一步作为优选的实施方式，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
进一步作为优选的实施方式，所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。
进一步作为优选的实施方式，所述根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单这一步骤，其包括以下子步骤：
当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；
当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；
和/或，
当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。
实施例3
结合以下优选实施例来对本发明做详细阐述。
为了降低使用各种第三方图表工具库的使用门槛，本发明的目的是提供一个所见即所得，且适用于无前端开发基础人员的图表可视化动态配置生成方案，其具体所对应的程序产品可优选为一图表编辑工具。
如图2所示，本发明一种可视化动态配置生成图表的方案，其具体实现步骤如下所示。
步骤一：构建可视化编辑界面。
本发明所实现的前端图表工具是能够根据用户的表单操作而动态生成相对应的配置项，然后引导用户根据提示进行相应配置参数的选择操作，从而实现通过表单输入就能够配置好渲染第三方图表库所需要的参数配置。可见，对于本发明所实现的前端图表工具，如图3所示，其可视化编辑界面具体包括有三部分：表单配置区、图表渲染区、配置代码展示区。
对于所述表单配置区，其主要用于提供图表配置参数表单，供用户选择操作，并且根据用户的选项，动态生成对应的表单参数所需要的表单进行交互操作；
对于图表渲染区，其主要用于根据用户操作的表单而确定输入的图表配置参数，在界面上渲染出对应的图表，实现所见即所得；
对于配置代码展示区，其主要用于根据用户操作的表单而确定输入的图表配置参数，动态生成对应的配置代码，并在界面上进行展示，这样不仅能便于无前端开发基础人员直接使用该配置好的代码，将该配置好的代码复制粘贴到指定区域便能直接显示对应的图表，而且还能方便拥有前端开发技能的高级用户直接进行调试修改。
步骤二：构建监听互动操作行为，实现所见即所得。
实现操作界面的核心功能有两点：1、操作行为监听器；2、配置参数实时校验。
(1)、操作行为监听器
上述的表单配置区分两个区域：基础配置区和参数配置区。
对于所述的基础配置区，其主要用于给用户提供第三方工具库的使用选项、图表类型的使用选项以及配置模式的使用选项，也就是说，所述基础配置区主要用于提供基础配置参数表单，而所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
所述第三方工具库表单所提供选择的第三方工具库包括有echarts、highcharts等前端js图标库；图表类型是指对应的第三方工具库所支持的图表，如，选echarts图表库就支持柱图、线图、饼图、雷达图、地图等，也就是说，图表类型表单所提供选择的图表类型会根据选择的第三方工具库的不同而有所不同，其可包括有柱图、线图、饼图、雷达图和/或地图；所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式；当配置模式选为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块，基础表单模块中仅含有基础配置参数所对应的表单，通过对表单进行选择和/或填写操作，确定输入的基础配置参数，这样便能在在图表渲染区中生成渲染出简单的图表，以及在配置代码区中生成展示出对应的配置代码；当监听得到的配置模式选为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块，所述扩展表单模块为更多可自主配置的表单模块，让用户有更多的操作权限，令后续渲染生成出来的图表更精细，更满足用户的需求；当监听得到的配置模式选为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态，即开放代码展示区进行编辑，此时可通过编辑配置代码展示区中的配置代码进行页面渲染，在图表渲染区中渲染生成出与配置代码相对应的图表。可见，对于所述的图表渲染区，当配置模式选为代码模式时，其还可根据配置代码展示区中的配置代码，实时动态渲染出对应的图表。
对于所述的参数配置区，其是在基础配置区选项确认之后，由程序动态加载并渲染出来的，也就是说，对于操作行为监听器，其用于监听基础配置区中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单。例如，当选用的第三方工具库为echarts，选用的图表类型为柱图，选用的配置模式为基础表单配置模式时，系统会执行以下操作：1.请求第三方工具库的依赖，加载echarts.min.js，异步加载完echarts.min.js之后，继续加载核心配置文件echarts.config.min.js(该文件为针对开发组件)；2.根据基础配置区所确定输入的基础配置参数，初始化整体界面，动态加载出echarts库中柱图的基础配置文件，并添加对应的事件；3.初始化参数配置区中的配置信息实时校验程序，实时监听配置表单的变化。
(2)、配置参数实时校验
根据监听得到的基础配置参数，对动态生成的参数配置区的表单进行对应的填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验，如必填校验、参数校验、展示数据源校验等。
所述对参数配置区中的表单所输入的配置信息进行监听校验，其具体包括以下子步骤：
2.1、遍历参数配置区中的表单元素；
以jQuery选择器为应用技术举例，通过$(‘#form’).find(‘input’)、$(‘#form’).find(‘input’)、$(‘#form’).find(‘textarea)等方法，获取到所有表单元素；
2.2、根据动态生成的表单元素中的自定义属性传递校验规则；
以input元素为例子，使用循环遍历，获取每一个input元素中预定的校验规则参数，而默认规则参数则是在动态生成的时候已经被渲染上去。在传递过程中，当检测到存在预定的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定；
2.3、监听校验方式的绑定；
监听校验方式主要包含但不限于有：必填校验、文本格式校验(是否符合转译规则)、范围校验等；
其中，必填校验指的是必须存在数值才能通过的校验；文本格式校验指的是校验所填写的数值是否符合文本，如必填的背景颜色框中必须有字符’#’，数据填写模块中必须是以‘、’号进行切割等；范围校验指的是判断输入框的输入范围，如范围必须大于0等。
在参数配置区的表单生成之后，校验程序就会对所有的表单元素进行监听。只有当所有的参数配置区的表单都能够通过校验，才会实时进行图表渲染以及代码区代码渲染显示，实现所见即所得的操作，也就是说，通过校验的表单，其所对应输入的数据才为确定输入的参数。
步骤三：所见即所得，实现多元化运用。
通过本发明所实现的工具，可以动态配置生成用户所需要的图表，而且能够以图形、以及代码的结果进行呈现。并且本发明所实现的工具可运用在多种不同的场景，其兼容适用性、商用性及推广性都非常高，具体地，本发明所实现的工具可运用的场景包括有：
运用场景一：发布生成图表html应用，具体地，配置好运用的各种参数之后，可以通过一键发布的功能，将配置的应用生成一个静态的html页面，并提供一个url地址给用户，用户可以在页面代码上通过iframe方式进行插入使用；
运用场景二：发布生成图表图片，具体地，运用现成的js插件，将canvas(echarts等第三方工具库生成图表的元素)，svg(highcharts等第三方工具库生成图表的元素)生成图表图片，保存到本机系统；
运用场景三：结合可视化编辑工具，将配置好的代码复制粘贴到指定区域便能直接显示，主要用于制作前端界面运用，操作建议性强。
可见，本发明通过表单操作方式与操作用户进行交互，动态生成不同第三方库、不同图表类型的配置表单，用户可以通过不同的配置参数表单就能够生成自身所需的图表；同时能够实时监听配置的数据及时渲染出效果，以及展示对应的配置代码，实现所见即所得的图表操作方式。由此可得，本发明的优点在于：1、降低用户的使用门槛，本发明通过动态生成配置表单方式，便能利用简单的表单配置就能够渲染出所需要的图表；2、兼容可视化前端配置工具，通过引入工具，能够解决部分可视化前端配置工具不能生成图表的功能，扩充了可视化前端配置工具的功能点。
以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。
Claims (10)
1.一种可视化动态配置生成图表的系统，其特征在于：该系统包括：
可视化编辑界面，包含有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；其中，所述表单配置区包含基础配置区和参数配置区；
操作行为监听器，用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；
配置参数校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。
2.根据权利要求1所述一种可视化动态配置生成图表的系统，其特征在于：所述配置参数校验单元具体包括：
提示模块，用于对参数配置区中的表单进行填写提示；
校验模块，用于遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。
3.根据权利要求2所述一种可视化动态配置生成图表的系统，其特征在于：所述监听校验方式包括必填校验、文本格式校验和/或范围校验。
4.根据权利要求1-3任一项所述一种可视化动态配置生成图表的系统，其特征在于：所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
5.根据权利要求4所述一种可视化动态配置生成图表的系统，其特征在于：所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。
6.根据权利要求5所述一种可视化动态配置生成图表的系统，其特征在于：所述操作行为监听器具体包括：
第一监听模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；
第二监听模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；
和/或，
第三监听模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。
7.一种可视化动态配置生成图表的方法，其特征在于：该方法包括以下步骤：
操作行为监听器监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单，并且配置参数校验单元对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验；
监听表单配置区的表单中所确定输入的图表配置参数；其中，所述表单配置区包含基础配置区和参数配置区，所述图表配置参数包含基础配置区中所输入的基础配置参数以及参数配置区中所输入的配置信息；
图表渲染区根据监听得到的图表配置参数，渲染出对应的图表；
配置代码展示区根据监听得到的图表配置参数，展示出对应的配置代码。
8.根据权利要求7所述一种可视化动态配置生成图表的方法，其特征在于：所述对参数配置区中的表单所输入的配置信息进行监听校验这一步骤，其具体包括以下子步骤：
遍历参数配置区中的表单元素，根据表单元素中的自定义属性传递校验规则；
当存在预设的校验规则参数时，则对参数配置区中相应的表单进行监听校验方式的绑定。
9.根据权利要求7或8所述一种可视化动态配置生成图表的方法，其特征在于：所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。
10.根据权利要求9所述一种可视化动态配置生成图表的方法，其特征在于：所述第三方工具库表单所提供选择的第三方工具库包括有前端js图标库，所述图表类型表单所提供选择的图表类型包括有柱图、线图、饼图、雷达图和/或地图，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710964819.3A CN107918516A (zh) | 2017-10-17 | 2017-10-17 | 一种可视化动态配置生成图表的系统及方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710964819.3A CN107918516A (zh) | 2017-10-17 | 2017-10-17 | 一种可视化动态配置生成图表的系统及方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107918516A true CN107918516A (zh) | 2018-04-17 |
Family
ID=61894752
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710964819.3A Pending CN107918516A (zh) | 2017-10-17 | 2017-10-17 | 一种可视化动态配置生成图表的系统及方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107918516A (zh) |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542438A (zh) * | 2018-11-19 | 2019-03-29 | 成都淞幸科技有限责任公司 | 一种基于可视化的图表开发方法 |
| CN109710686A (zh) * | 2018-12-27 | 2019-05-03 | 杭州火树科技有限公司 | 可视化构建图表的分析系统 |
| CN109710910A (zh) * | 2018-12-29 | 2019-05-03 | 益萃网络科技（中国）有限公司 | 单据生成方法和系统、存储介质 |
| CN111104781A (zh) * | 2018-10-26 | 2020-05-05 | 珠海格力电器股份有限公司 | 图表处理方法和装置 |
| CN111177251A (zh) * | 2020-01-16 | 2020-05-19 | 创意信息技术股份有限公司 | 一种数据可视化展示平台 |
| CN111274781A (zh) * | 2020-01-21 | 2020-06-12 | 北京三快在线科技有限公司 | 表格显示方法、装置、存储介质及电子设备 |
| CN111309317A (zh) * | 2020-02-09 | 2020-06-19 | 北京工业大学 | 一种实现数据可视化的代码自动化方法和装置 |
| CN111414404A (zh) * | 2020-03-20 | 2020-07-14 | 北京东方金信科技有限公司 | 一种数据可视化装置和方法 |
| CN111880771A (zh) * | 2020-07-06 | 2020-11-03 | 北京达佳互联信息技术有限公司 | 一种数据可视化模块的生成方法及装置 |
| CN111949260A (zh) * | 2020-06-24 | 2020-11-17 | 武汉烽火众智数字技术有限责任公司 | 一种移动端业务配置化方法及系统 |
| CN112241267A (zh) * | 2020-09-16 | 2021-01-19 | 武汉木仓科技股份有限公司 | 配置化工具及利用配置化工具实现表格页面开发的方法 |
| CN112328349A (zh) * | 2020-11-05 | 2021-02-05 | 金蝶云科技有限公司 | 一种参数设置方法及相关设备 |
| CN112632650A (zh) * | 2020-12-18 | 2021-04-09 | 华荣科技股份有限公司 | 一种非标防爆电器产品智能设计系统及方法 |
| CN112764740A (zh) * | 2021-01-26 | 2021-05-07 | 北京融和友信科技股份有限公司 | 一种基于Shell的应用在系统间文件交互中的处理方法 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100005411A1 (en) * | 2008-07-02 | 2010-01-07 | Icharts, Inc. | Creation, sharing and embedding of interactive charts |
| CN104899027A (zh) * | 2015-05-22 | 2015-09-09 | 国云科技股份有限公司 | 一种实现js通用表单验证的方法 |
| CN106126154A (zh) * | 2016-08-31 | 2016-11-16 | 浪潮软件集团有限公司 | 一种大屏展示配置方法 |
-
2017
- 2017-10-17 CN CN201710964819.3A patent/CN107918516A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100005411A1 (en) * | 2008-07-02 | 2010-01-07 | Icharts, Inc. | Creation, sharing and embedding of interactive charts |
| CN104899027A (zh) * | 2015-05-22 | 2015-09-09 | 国云科技股份有限公司 | 一种实现js通用表单验证的方法 |
| CN106126154A (zh) * | 2016-08-31 | 2016-11-16 | 浪潮软件集团有限公司 | 一种大屏展示配置方法 |
Non-Patent Citations (2)
| Title |
|---|
| 易程铖: "基于MVC框架的通用统计图表生成系统", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
| 梁先勇: "基于SVG的图表组件设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
Cited By (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111104781A (zh) * | 2018-10-26 | 2020-05-05 | 珠海格力电器股份有限公司 | 图表处理方法和装置 |
| CN109542438A (zh) * | 2018-11-19 | 2019-03-29 | 成都淞幸科技有限责任公司 | 一种基于可视化的图表开发方法 |
| CN109710686A (zh) * | 2018-12-27 | 2019-05-03 | 杭州火树科技有限公司 | 可视化构建图表的分析系统 |
| CN109710910A (zh) * | 2018-12-29 | 2019-05-03 | 益萃网络科技（中国）有限公司 | 单据生成方法和系统、存储介质 |
| CN111177251A (zh) * | 2020-01-16 | 2020-05-19 | 创意信息技术股份有限公司 | 一种数据可视化展示平台 |
| CN111274781A (zh) * | 2020-01-21 | 2020-06-12 | 北京三快在线科技有限公司 | 表格显示方法、装置、存储介质及电子设备 |
| CN111309317A (zh) * | 2020-02-09 | 2020-06-19 | 北京工业大学 | 一种实现数据可视化的代码自动化方法和装置 |
| CN111414404A (zh) * | 2020-03-20 | 2020-07-14 | 北京东方金信科技有限公司 | 一种数据可视化装置和方法 |
| CN111949260A (zh) * | 2020-06-24 | 2020-11-17 | 武汉烽火众智数字技术有限责任公司 | 一种移动端业务配置化方法及系统 |
| CN111880771A (zh) * | 2020-07-06 | 2020-11-03 | 北京达佳互联信息技术有限公司 | 一种数据可视化模块的生成方法及装置 |
| CN111880771B (zh) * | 2020-07-06 | 2024-03-19 | 北京达佳互联信息技术有限公司 | 一种数据可视化模块的生成方法及装置 |
| CN112241267A (zh) * | 2020-09-16 | 2021-01-19 | 武汉木仓科技股份有限公司 | 配置化工具及利用配置化工具实现表格页面开发的方法 |
| CN112328349A (zh) * | 2020-11-05 | 2021-02-05 | 金蝶云科技有限公司 | 一种参数设置方法及相关设备 |
| CN112632650A (zh) * | 2020-12-18 | 2021-04-09 | 华荣科技股份有限公司 | 一种非标防爆电器产品智能设计系统及方法 |
| CN112632650B (zh) * | 2020-12-18 | 2023-02-10 | 华荣科技股份有限公司 | 一种非标防爆电器产品智能设计系统及方法 |
| CN112764740A (zh) * | 2021-01-26 | 2021-05-07 | 北京融和友信科技股份有限公司 | 一种基于Shell的应用在系统间文件交互中的处理方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107918516A (zh) | 一种可视化动态配置生成图表的系统及方法 | |
| US11263228B2 (en) | Continuously scrollable calendar user interface | |
| CN108052365B (zh) | 用户界面的组件生成方法及装置 | |
| US7017145B2 (en) | Method, system, and program for generating a user interface | |
| US20230111594A1 (en) | Simplified website creation, configuration, and customization system | |
| US20050216834A1 (en) | Method, apparatus, and computer-readable medium for dynamically rendering a user interface menu | |
| US20050183008A1 (en) | Method and system for separation of content and layout definitions in a display description | |
| CN111506444A (zh) | 表单的审批方法、装置、存储介质及电子设备 | |
| US20140245199A1 (en) | Method and system for customizing a gui of a mes screen | |
| US20150052496A1 (en) | Providing a user interface library for building web-based applications | |
| WO2012112423A2 (en) | Automatically creating business applications from description of business processes | |
| US9304746B2 (en) | Creating a user model using component based approach | |
| US20140331179A1 (en) | Automated Presentation of Visualized Data | |
| CN108108194A (zh) | 用户界面编辑方法以及用户界面编辑器 | |
| CN112527250A (zh) | 一种基于可视化的软件开发平台 | |
| US20140095978A1 (en) | Mash-up authoring device using templates and method thereof | |
| CN115599363A (zh) | 可视化组件的配置方法、装置以及系统 | |
| CN103593188A (zh) | 一种用于仪器所见即所得菜单的管理系统及管理方法 | |
| Yoshioka et al. | Unified Symbol Framework to Improve UI Comprehension | |
| CN107783744A (zh) | 拼接屏幕的数据显示、控制方法及装置、系统、显示设备 | |
| Popp et al. | Duality of task-and discourse-based interaction design for GUI generation | |
| CN113343656A (zh) | 一种图表配置元素数据模型的二次编辑方法 | |
| CN102789379A (zh) | 搭建用户界面的方法和装置 | |
| CN117215585B (zh) | 一种可视化描述以及动态控制界面组件属性的方法及装置 | |
| CN104598465B (zh) | 一种浏览器内嵌地址栏的实现方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180417 |
|
| RJ01 | Rejection of invention patent application after publication |