CN107844297B - 一种数据可视化实现系统及方法 - Google Patents

Abstract

本发明公开了数据可视化实现系统及方法，该系统包括：第一前端界面和用于监听到结束按钮元素的拖拽操作时，在画布编辑区上渲染出图表工具控件的代码的监听控制器，该图表工具控件的代码用于图表工具的生成；生成的图表工具包括第二前端界面及用于根据监听得到的基础配置参数，加载渲染出参数配置区表单的监听控制器。该方法包括：对图表工具控件对应的按钮元素进行拖拽操作行为的监听；当监听到结束按钮元素的拖拽操作时，在画布编辑区上渲染出图表工具控件的代码。本发明可简化图表生成制作的操作手段，以及实现可视化的图表参数配置，适用于无前端开发基础的人群，扩大了图表工具的应用场景和群体。本发明可广泛应用于前端处理技术领域中。

Description

一种数据可视化实现系统及方法

技术领域

本发明涉及前端处理技术，尤其涉及一种数据可视化实现系统及方法。

背景技术

技术词解释：

图表：图表泛指在屏幕中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键性作用的图形结构，是一种很好的将对象属性数据直观、形象地“可视化”的手段。

表单：HTML中的元素，包括不同类型的input元素、复选框、单选按钮、提交按钮等等。

html：超级文本标记语言，其是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

web前端界面：通过浏览器给用户展示的界面图形，其中包含了设计、特效、用户交互等内容。

button：按钮。

近几年大数据形成了一个潮流，大数据的一些应用也经常出现在各种报告、文章中，而以图表方式来展示描述大数据的走向、趋势，这比以前仅依赖冷冰冰的文字来展示描述显得生动且更有活力。但是，如何将数据更加友好的呈现出来，以各种图表的方式来进行展现，这却存在一定的技术门槛。

目前，市面上存在很多优秀的工具可实现数据的可视化，以图表方式来展现描述数据，如百度的echarts、HIGHSOFT公司的highcharts、InfoSoft Global公司的FusionCharts等优秀的前端图表工具。但是，由于这些优秀的前端图表工具的直接使用是需要具备前端技术开发功底的，因此这就将大量没有开发功底的人员拒绝于门外。而在现实实际的生产工作中，存在很多无前端开发能力的人员也需要使用大数据进行可视化的呈现，因此如何制定合理、可行、科学、而且能够适用于无前端开发基础人员的大数据可视化方案，这具有重要的意义。

发明内容

为了解决上述技术问题，本发明的目的是提供一种适用于无前端开发基础人员的数据可视化实现系统及方法。

本发明所采用的第一技术方案是：一种数据可视化实现系统，该系统包括：

第一前端界面，设置有控件区、画布编辑区和工具操作区；

第一监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码；其中，所述被拖拽的按钮元素所对应的多媒体控件为图表工具控件；所述图表工具控件的代码用于图表工具的生成；

生成的图表工具包括第二前端界面以及第二监听控制器；

所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；所述表单配置区包含基础配置区和参数配置区；所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单。

本发明所采用的第二技术方案是：一种数据可视化实现方法，该方法包括以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；

当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码；其中，所述被拖拽的按钮元素所对应的多媒体控件为图表工具控件；所述图表工具控件的代码用于图表工具的生成；

生成的图表工具包括第二前端界面以及第二监听控制器；

所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；所述表单配置区包含基础配置区和参数配置区；所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单。

本发明系统及方法的有益效果是：通过使用本发明，使用者可通过拖拽操作方式，将图表工具控件所对应的按钮元素从控件区拖拽至画布编辑区中，并且当第一监听控制器监听到结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，会在画布编辑区上生成渲染出被拖拽的按钮元素所对应的图表工具控件的代码，此时，利用所述图表工具控件的代码，便可生成对应的图表工具；而本发明中所生成的图表工具包括有第二前端界面以及第二监听控制器，所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区，所述表单配置区包含基础配置区和参数配置区，且第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单，因此由此可见，本发明所生成的图表工具可实现可视化的编辑操作，并且能够根据基础配置区的表单中所确定输入的基础配置参数，动态加载渲染出对应的参数配置区的表单，以供使用者选择和/或填写相应的图表配置参数，从而生成渲染出对应的图表，这样对于使用者而言，其只需进行相应图表配置参数的选择和/或填写便可得到所需的图表，而无需编程，大大简化了图表生成制作的操作手段，适用于无前端开发基础的人群，扩大了图表工具的应用场景和群体，而且由于本发明的图表工具会根据选择和/或填写的图表配置参数，实时生成渲染展示出对应的图表，因此使用者能及时了解到自己所选择和/或填写的图表配置参数所对应生成的图表，这样能便于使用者根据实时生成渲染出的图表，及时做参数的调整或修改，操作灵活性高。

附图说明

图1是构建可视化编辑的图表工具的步骤示意图；

图2是第二前端界面的示意图；

图3是第二前端界面上输入表单的示意图；

图4是第三前端界面的数据显示示意图；

图5是第二前端界面上数据源展示区的示意图；

图6是构建可视化编辑生成系统的步骤示意图；

图7是第一前端界面的示意图；

图8是控件拖拽过程的示意图；

图9是本发明一种数据可视化实现方案的步骤流程示意图；

图10是生成的图表应用后所显示的一具体效果示意图。

具体实施方式

在现有的数据可视化工具研究中，主要针对有编程功底的人员使用，且研究方向主要还是在于表单配置效率的提高、代码量减少等方面，完全没有针对无开发经验人员的使用场景。然而，在实际应用场景上，无开发经验的人员比有开发经验的人员群体大，并且实际应用的场景远比开发场景大。因此，为了令无前端开发基础的人员也能实现数据可视化操作，自定义所需图表来展示描述对应的数据，本发明设计了一种无需前端开发基础，也能方便将数据进行可视化的方案，其具体为一种基于拖拉拽操作来生成第三方图表工具的方案，而生成得到的第三方图表工具，其能通过可视化的表单操作来进行图表的编辑生成，可见，本发明的操作便利性极高，而且无需前端开发基础、编程功底，大大提高第三方图表工具的适用性和兼容性，扩大了第三方图表工具的适用人群，提高第三方图表工具的商业价值，利于其广泛推广和应用。

实施例1

在本实施例中，本发明一种数据可视化实现系统，其包括：

第一前端界面，设置有控件区、画布编辑区和工具操作区；

第一监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码；其中，所述被拖拽的按钮元素所对应的多媒体控件为图表工具控件；所述图表工具控件的代码用于图表工具的生成；

生成的图表工具包括第二前端界面以及第二监听控制器；

所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；所述表单配置区包含基础配置区和参数配置区；所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单。

作为本实施例的优选实施方式，所述第一监听控制器还用于当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储和显示有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

作为本实施例的优选实施方式，所述第一监听控制器还用于根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个多媒体控件对应唯一一个id号。

作为本实施例的优选实施方式，该系统还包括：

第一保存单元，用于将画布编辑区中的所有代码存储到本地缓存服务器和/或上传到远程服务器进行存储；

和/或，

第二保存单元，用于将操作数据存储到本地缓存服务器和/或上传到远程服务器进行存储。

作为本实施例的优选实施方式，所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单和/或配置模式表单，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式；

所述第二监听控制器具体包括：

第一监听控制子模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；

第二监听控制子模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；

和/或，

第三监听控制子模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。

作为本实施例的优选实施方式，所述生成的图表工具还包括：

第一校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。

作为本实施例的优选实施方式，：所述第二前端界面还设置有用于上传EXCEL文件的输入表单，以及用于响应保存操作，将保存的数据所对应的数据源ID进行渲染展示的数据源展示区；其中，渲染展示的数据源ID用于被选取，从而调用对应的数据来生成匹配的图表后，令生成的图表渲染展示在图表渲染区中；

所述生成的图表工具还包括：

后端接口，用于接收上传的EXCEL文件，对接收得到的EXCEL文件进行数据读取，对读取得到的EXCEL数据进行校验，将校验合格的EXCEL数据写入数据库，然后遍历数据库中的EXCEL数据来产生数据行，根据产生的数据行，生成新的EXCEL工作簿，接着将生成的EXCEL工作簿返回至第三前端界面；

第三前端界面，用于根据EXCEL工作簿的表格格式，将EXCEL工作簿中的数据进行显示，以及触发对显示的EXCEL工作簿中的数据执行保存操作。

作为本实施例的优选实施方式，该系统还包括：

第三保存单元，用于响应所述的保存操作，根据所需保存的数据所对应的数据源ID，划分出对应的本地存储区域，令所需保存的数据存储在本地存储区域和/或备份在远程服务器中。

本实施例的所有内容适用于实施例2中。

实施例2

在本实施例中，一种数据可视化实现方法，包括以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；

当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码；其中，所述被拖拽的按钮元素所对应的多媒体控件为图表工具控件；所述图表工具控件的代码用于图表工具的生成；

生成的图表工具包括第二前端界面以及第二监听控制器；

所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于展示输入的图表配置参数所对应的配置代码的配置代码展示区；所述表单配置区包含基础配置区和参数配置区；所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单。

作为本实施例的优选实施方式，该方法还包括以下步骤：

当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；

根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中进行存储和显示；

其中，一个多媒体控件对应唯一一个id号；所述临时层用于跟随鼠标移动轨迹进行移动，以及根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

实施例3

结合本优选实施例来对上述实施例做进一步的阐述，也就是说，本实施例中的所有内容均适用于上述实施例1和实施例2中。

本发明一种数据可视化实现系统，其具体实现步骤如下所示。

第一部分：构建可视化编辑的图表工具。此部分所包括的实现步骤如图1所示。

S101、构建图表工具的第二前端界面，所述第二前端界面具体指的是可视化编辑界面。

在本实施例中，所需构建的图表工具，其配置方式是能够根据用户的操作，从而动态生成对应的配置项，然后引导用户根据提示进行对应的操作，以实现通过表单输入便能够配置好渲染第三方图表库所需要的参数配置。因此在本实施例中，所述第二前端界面包括三部分：表单配置区、图表渲染区、配置代码展示区，如图2所示。

对于所述表单配置区，其主要用于提供图表配置参数表单，供用户选择操作，并且根据用户的选项，动态生成对应的表单参数所需要的表单进行交互操作；

对于图表渲染区，其主要用于根据用户操作的表单而确定输入的图表配置参数，和/或，配置代码展示区中的配置代码，在界面上渲染出对应的图表，实现所见即所得；

对于配置代码展示区，其主要用于根据用户操作的表单而确定输入的图表配置参数，动态生成对应的配置代码，并在界面上进行展示，这样不仅能便于无前端开发基础人员直接使用该配置好的代码，将该配置好的代码复制粘贴到指定区域便能直接显示对应的图表，而且还能方便拥有前端开发技能的高级用户直接进行代码的调试修改。

S102、构建图表工具的第二监听控制器，即第二操作行为监听控制器。

上述步骤S101中的表单配置区分两个区域：基础配置区和参数配置区。

对于所述的基础配置区，其主要用于给用户提供第三方工具库的使用选项、图表类型的使用选项以及配置模式的使用选项，也就是说，所述基础配置区主要用于提供基础配置参数表单，而所述基础配置参数表单包括有第三方工具库表单、图表类型表单以及配置模式表单。

所述第三方工具库表单所提供选择的第三方工具库包括有echarts、highcharts等前端js图标库；图表类型是指对应的第三方工具库所支持的图表，如，选echarts图表库就支持柱图、线图、饼图、雷达图、地图等，也就是说，图表类型表单所提供选择的图表类型会根据选择的第三方工具库的不同而有所不同，其可包括有柱图、线图、饼图、雷达图和/或地图；所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式；当监听得到的配置模式选为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块，基础表单模块中仅含有基础配置参数所对应的表单，通过对表单进行选择和/或填写操作，确定输入的配置信息，这样便能在在图表渲染区中生成渲染出简单的图表，以及在配置代码区中生成展示出对应的配置代码；当监听得到的配置模式选为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块，所述扩展表单模块为更多可自主配置的表单模块，让用户有更多的操作权限，令后续渲染生成出来的图表更精细，更满足用户的需求；当监听得到的配置模式选为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态，即开放代码展示区进行编辑，此时可通过编辑配置代码展示区中的配置代码进行页面渲染，在图表渲染区中渲染生成出与配置代码相对应的图表。可见，对于所述的图表渲染区，当配置模式选为代码模式时，其还可根据配置代码展示区中的配置代码，实时动态渲染出对应的图表。

可见，对于所述的参数配置区，其是在基础配置区选项确认之后，由程序动态加载并渲染出来的，也就是说，对于第二监听控制器，其主要用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单。例如，当选用的第三方工具库为echarts，选用的图表类型为柱图，选用的配置模式为基础表单配置模式时，系统会执行以下操作：1.请求第三方工具库的依赖，加载echarts.min.js，异步加载完echarts.min.js之后，继续加载核心配置文件echarts.config.min.js(该文件为针对开发组件)；2.根据基础配置区所确定输入的基础配置参数，初始化整体界面，动态加载出echarts库中柱图的基础配置文件，并添加对应的事件；3.初始化参数配置区中的配置信息实时校验程序，实时监听配置表单的变化。

S103、构建第一校验单元，其用于配置信息的实时校验，即所述第一校验单元实质为配置信息校验单元。

具体地，所述第一校验单元，用于根据监听得到的基础配置参数，对动态生成的参数配置区的表单进行对应的填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验，如必填校验、参数校验、展示数据源校验等。

所述对参数配置区中的表单所输入的配置信息进行监听校验，其具体包括以下子步骤：

S1031、遍历参数配置区中的表单元素；

以jQuery选择器为应用技术举例，通过$(‘#form’).find(‘input’)、$(‘#form’).find(‘input’)、$(‘#form’).find(‘textarea)等方法，获取到所有表单元素；

S1032、根据动态生成的表单元素中的自定义属性传递校验规则；

以input元素为例子，使用循环遍历，获取每一个input元素中预定的校验规则参数，而默认规则参数则是在动态生成的时候已经被渲染上去。在传递过程中，当检测到存在预定的校验规则参数时，则对参数配置区中相应的表单进行相应监听校验方式的绑定；

S1033、监听校验方式的绑定；

监听校验方式主要包含但不限于有：必填校验、文本格式校验(是否符合转译规则)、范围校验等；

其中，必填校验指的是必须存在数值才能通过的校验；文本格式校验指的是校验所填写的数值是否符合文本，如必填的背景颜色框中必须有字符’#’，数据填写模块中必须是以‘、’号进行切割等；范围校验指的是判断输入框的输入范围，如范围必须大于0等。

在参数配置区的表单生成之后，校验程序就会对所有的表单元素进行监听。只有当所有的参数配置区的表单都能够通过校验，才会实时进行图表渲染以及代码区代码渲染显示，实现所见即所得的操作，也就是说，通过校验的表单，其所对应输入的数据才为确定输入的参数。

S104、配置图表数据源。

由于图表工具的数据源是比较复杂，而传统的数据源提供方式是直接在配置项上编辑代码，可见，这种方式并不适合普遍的用户，因此，为了满足大多数无前端开发基础、编程功底的人员的使用需求，在本发明所生成的图表工具中，设计一种通过web可视化操作，从而实现图表数据源配置的方案。此方案包括以下步骤：

S1041、在第二前端界面上构建设置有用于上传EXCEL文件的输入表单，如图3所示。

通过第二前端界面上的输入表单，用户可选择本地的EXCEL文件，并进行上传。在本实施例中，EXCEL文件的上传优选采用了jQuery File Upload的插件来实现。

具体地，步骤S1041具体包括：在第二前端界面上设置输入表单元素，即表单元素input，对表单元素input进行初始化，并设置好上传路径和类型，以及配置相应的上传类型，这样便能利用第二前端界面上的表单元素input来上传EXCEL文件。

S1042、构建后端接口，令后端接口具体用于接收上传的EXCEL文件，对接收得到的EXCEL文件进行数据读取，对读取得到的EXCEL数据进行校验，将校验合格的EXCEL数据写入数据库，然后遍历数据库中的EXCEL数据来产生数据行，根据产生的数据行，生成新的EXCEL工作簿，接着将生成的EXCEL工作簿返回至第三前端界面。

具体地，对于上述后端接口对接收得到的EXCEL文件进行数据读取，其具体包括：

S10421、从接收得到的EXCEL文件中，获取得到对应的字节输入流以及EXCEL文件名；

在本实施例中，步骤S10421具体为：将由第二前端界面上传来的EXCEL文件流存储到MultipartFile对象中，通过调用MultipartFile中的getInputStream，获取得到对应的字节输入流，调用getOriginalFilename，获取得到EXCEL文件名；

S10422、根据获取到的字节输入流以及EXCEL文件名来初始化工作簿对象，从而创建得到对应的工作簿，然后迭代遍历工作簿中的所有工作表，通过下标来访问工作表，接着，访问工作表中的单元格，以获取得到单元格的类型以及单元格中的内容；

在本实施例中，所述步骤S10422具体包括：

首先，根据获取到的字节输入流以及EXCEL文件名，来初始化Apache POI的工作簿Workbook对象，从而创建得到对应的工作簿Workbook；其中，若以Java(xls)的方式来读取或写入EXCEL文件，则可以使用HSSF；若以Java(xlsx)方式来读取或写入Excel文件，则可以使用XSSF；若不以Java(xls和xlsx)方式，则会抛出文件未识别的异常，也就是说，若上传的文件的类型不为xls或xlsx，则抛出文件未识别的异常；

接着，创建了工作簿Workbook后，迭代遍历该Excel工作簿Workbook里面的所有工作表Sheet，通过下标来访问具体的工作表Sheet；

跟着，得到了工作表Sheet后，通过它来访问表中的Excel Cell单元格，通过getType()方法获取得到单元格的类型，通过getContents()方法获取得到单元格中的内容。

具体地，对于上述后端接口对读取得到的EXCEL数据进行校验，其具体包括：

对获取到单元格中的内容进行数据验证，根据预定义值来校验单元格中的内容是否符合校验规则，若是，则表示单元格中的内容校验合格；反之，则表示单元格中的内容校验不合格。所述校验规则可根据实际情况进行设置调整，例如，校验规则可为，将单元格中的数值限制为三个整数值10、20、30之一。

具体地，对于上述后端接口将校验合格的EXCEL数据写入数据库，其具体包括：

通过java.lang.Class类的静态方法forName(String className)，加载所需连接的数据库的驱动到JVM(Java虚拟机)，成功加载后，将Driver类(驱动类)的实例注册到DriverManager类(驱动管理类)中；连接数据库时，创建数据库连接Connection对象，并传入所需连接的数据库的路径、用户名和密码；连接数据库后，创建一个PreparedStatement对象，从而调用方法executeQuery批量将校验合格的EXCEL数据写入数据库中。其中，所述PreparedStatement为Java接口的类型。

具体地，对于上述后端接口遍历数据库中的EXCEL数据来产生数据行，根据产生的数据行，生成新的EXCEL工作簿，接着将生成的EXCEL工作簿返回至第三前端界面，其具体包括：

首先，利用Workbook类的工厂方法创建一个可写入的工作簿Workbook对象；

然后，对工作簿Workbook对象所生成的表格进行表格格式设置，例如，设置字体的表格样式、合并单元格、字体大小(字号)、字体颜色、表格大小等；

跟着，遍历数据库中的EXCEL数据来产生数据行，从而生成新的EXCEL工作簿；

接着，将生成的EXCEL工作簿对象写入到输出流并返回至第三前端界面，供前端动态展示调用。

S1043、构建第三前端界面，令第三前端界面主要用于根据EXCEL工作簿的表格格式，将EXCEL工作簿中的数据进行显示，以及触发对显示的EXCEL工作簿中的数据执行保存操作。也就是说，所述第三前端界面实质为显示操作界面。

具体地，对于根据EXCEL工作簿的表格格式，将EXCEL工作簿中的数据进行显示，其具体包括：

后端接口返回新的EXCEL工作簿之后，第三前端界面会根据返回的EXCEL工作簿的数据状态码，对返回的EXCEL工作簿的数据状态进行判断；当由后端接口返回的EXCEL工作簿的数据状态被判断为正确时，则根据EXCEL工作簿的表格格式，在前端页面上将EXCEL工作簿中的数据进行显示，并优选地，令显示出来的数据表格格式与EXCEL工作簿的数据表格格式相同，具体如图4所示；

此时，用户可对显示在第三前端界面上的EXCEL工作簿进行确认，确认所上传的数据文档是否正确；而在数据浏览确认的过程中，可支持分页浏览查看，便于用户进行查看操作，同时在浏览的过程中，用户也可以对数据进行增、删、改的操作，保证数据源的数据准确性；可见，对于用于显示EXCEL工作簿的前端页面，其支持分页浏览查看功能，和/或数据增加、删除、修改的操作。

具体地，对于触发对显示的EXCEL工作簿中的数据执行保存操作，其具体包括：

当用户浏览确认第三前端界面上所显示的EXCEL工作簿后，用户可通过点击第三前端界面上所设置的保存按钮，从而触发对显示的EXCEL工作簿中的数据执行保存操作。

S1044、在第二前端界面上构建设置有用于响应保存操作，将保存的数据所对应的数据源ID进行渲染展示的数据源展示区。

具体地，当触发对显示的EXCEL工作簿中的数据执行保存操作时，令第二前端界面响应此保存操作，然后，将所需保存的数据所对应的数据源ID在数据源展示区中进行渲染展示，其中，渲染展示的数据源ID用于被选取，从而调用对应的数据来生成匹配的图表后，令生成的图表渲染展示在图表渲染区中，如图5所示。

S1045、构建第三保存单元，令第三保存单元主要用于响应所述的保存操作，根据所需保存的数据所对应的数据源ID，划分出对应的本地存储区域，令所需保存的数据存储在本地存储区域和/或备份在远程服务器中。

具体地，令第三保存单元响应上述保存操作后，根据所需保存的数据所对应的数据源ID，划分出对应专用的本地存储区域(localstorage区域)，并将所需保存的数据转换成固定的json格式，然后使用JSON.Stringfy方法格式化这些数据后，令所需保存的数据存储在本地存储区域以及备份在远程服务器中，便于下次直接使用或者编辑；其中，所述数据源ID可为所需生成的图表所对应的图表ID。

可见，通过上述步骤S104所实现的数据源配置方式，能够将上传的EXCEL文件中的数据保存后作为一数据源，当用户点击选取该数据源时，图表工具中的图表渲染区上便会实时渲染展示出该数据源所对应的图表，操作方便快捷、可视化，大大简化了图表工具的数据源配置方式，尤其适合无前端开发基础的人群使用。

由上述第一部分的内容可得，通过使用其所构建得到的图表工具，用户仅需要选择确定输入的图表配置参数以及上传所需的数据源，便能生成所需的图表，然后，通过点击图表工具界面上的保存按钮对生成的图表进行存储，接着用户便可将存储后的图表，按照实际需要，以不同方式应用在不同场景中，例如，发布生成图表html应用、发布生成图表图片等。

第二部分：构建可视化编辑生成系统。此部分所包括的步骤如图6所示。

S201、构建第一前端界面，令第一前端界面上设置有控件区、画布编辑区和工具操作区；即第一前端界面具体指的是前端页面布局界面。

在本实施例中，所述第一前端界面是基于Bootstrap而开发的，通过引入Bootstrap的基础文件来编写操作界面，令第一前端界面中的左侧设为控件区，右侧设为画布编辑区，顶部设为工具操作区，具体如图7所示。

对于第一前端界面中的每个模块区域，其各司其职，具体：工具操作区主要是常用工具的集中摆放位置，所述常用工具包括但不限于有编辑模式、预览效果、保存编辑、清空代码、撤销等操作；所述控件区主要是摆放多媒体控件的操作按钮(即按钮元素)，也是拖拽交互的开始点；所述画布编辑区则是核心的操作区域，负责代码可视化渲染及代码存储等功能。

S202、构建第一监听控制器，所述第一监听控制器具体指的是第一操作行为监听控制器，用于监听前端操作行为，并执行相应的处理。也就是说，所述第一监听控制器实质为第一操作行为监听控制器。

在本实施例中，前端操作行为监听是采用jquery.ui的交互插件来实现操作行为的监听。

在控件区上建立基本元素button列表，并给控件区中所有的button元素绑定拖拽监听行为，如图8所示，当在控件区的button元素(按钮元素)被用户进行拖拽操作，即在控件区的button元素被鼠标点击，并且点击后不释放鼠标操作的同时进行拖动，就新建一个相对应的浮动于网页上层的div层(以下简称临时层)。也就是说，当监听到按钮元素被进行拖拽操作时，便会新建一个与被拖拽的按钮元素相对应的临时层。

对于上述的临时层，其存储并显示了被拖拽的button元素所对应的多媒体控件的页面信息及数据信息(所述数据信息具体为样例数据)，临时层则可根据多媒体控件的页面信息及数据信息及时在html上渲染出对应的多媒体插件效果，而且临时层是跟随用户的鼠标移动轨迹进行移动，这样则能够及时将鼠标拖拽轨迹展现给用户，同时记录当前鼠标位置给接下来释放鼠标行为操作做判断。当临时层处于合法的画布编辑区以及监听到用户的释放鼠标行为操作，以结束button元素的拖拽操作时，则根据div层中所存储的内容，按照预设的规范，在画布编辑区生成与被拖拽的button元素对应的多媒体控件的代码，并将该代码实时渲染在画布编辑区上。也就是说，当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于合法的画布编辑区中时，则按照预设的规范，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码，同时还可优选地，初始化生成与该多媒体控件对应的编辑工具，便于后续的编辑；反之，当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置不是处于合法的画布编辑区中时，则取消此次操作，并清除div层。

优选地，在合法的操作之后，即鼠标释放时，当前鼠标位置处于合法的画布编辑区后，会触发一个数据保存事件，利用浏览器的本地存储功能localstorage，将渲染在画布编辑区中的所有代码，使用JSON.stringfy方法进行格式化后存储到本地缓存服务器中，其中，存储的数据所包含的内容包括但不限于有布局信息、可编辑类型、渲染内容类型、内容数据等等相关信息。由于采用本地存储功能localstorage来实现存储，其能达到便捷、快速的效果，可以很好的实现随存随取，响应速度足够快。

优选地，画布编辑区中的所有代码还可上传到远程服务器进行存储，以实现数据备份，便于数据共享、管理、查询等。

优选地，本发明还可将上述监听到的所有操作行为，即操作数据，存储到本地缓存服务器和/或上传到远程服务器进行存储，这样无论是否操作成功，都不用担心数据丢失，当操作失败或失误时，均能利用存储的操作数据来实现操作的撤销，从而返回恢复至上一操作步骤。

S203、构建多媒体控件。

所述多媒体控件主要分四大类型，分别是：布局控件、基本控件、交互组件、拓展组件；具体地：

布局控件：此控件用于将画布编辑区进行分割；

基本控件：此控件主要含括了常用的html语义标签以及一些Bootstrap常用的组合类型应用；

交互控件：此控件主要包括有焦点图、轮换图、手风琴切换、提示框、导航栏等；

扩展组件：此组件是提供自定义组件的一种方式，可自定义创建扩展组件，通过依赖文档如js、css等来操作添加插件，并编辑扩展组件的操作按钮；编辑好操作按钮之后，系统会自动绑定拖动事件，当用户实现拖动到合法区域，就能够根据用户编辑的好的插件进行渲染及展示。

而在本发明中，上述扩展组件支持引入上述第一部分构建的第三方图表工具，因此，生成上述图表工具，以实现数据可视化，利用图表方式来展示描述对应的数据的方案，如图9所示，其具体实现步骤包括：

S301、利用第一监听控制器对设置在控件区中的第一按钮元素进行拖拽操作行为的监听；所述第一按钮元素指的是图表工具控件所对应的按钮元素；

S302、当第一监听控制器监听到第一按钮元素被拖拽操作时，即用户通过鼠标对第一按钮元素进行拖拽操作行为时，新建与第一按钮元素相对应的临时层；然后，根据图表工具控件的id号，获取对应的图表工具控件的页面信息及数据信息，并将获取得到的图表工具控件的页面信息及数据信息复制至临时层中进行存储和显示；

其中，临时层会跟随鼠标移动轨迹进行移动，以及会根据图表工具控件的页面信息及数据信息，渲染出对应的多媒体插件效果；

S303、当第一监听控制器监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区上生成渲染出图表工具控件的代码；反之，则取消此次操作，并清除临时层；

此时，在画面编辑区上渲染展示出的图表工具控件的代码，其可用于对应图表工具的生成。因此由此可见，通过复制上述步骤所得到的代码到计算机的剪贴板上，这样，用户便可以直接通过iframe应用或者直接在html上应用到自己成品，而这一成品便为用户所需使用的图表工具，即为第一部分中所述的图表工具。

而根据上述第一部分的内容可知，生成的图表工具包括第二前端界面、第二监听控制器、第一校验单元、后端接口、第三保存单元，而这几部分的具体阐述如下所示：

①、所述第二前端界面

所述第二前端界面设置有：

表单配置区，用于提供图表配置参数表单；所述表单配置区包含基础配置区和参数配置区；

图表渲染区，用于根据输入的图表配置参数和/或配置代码，渲染出对应图表；

配置代码展示区，用于展示输入的图表配置参数所对应的配置代码的；

输入表单，用于上传EXCEL文件；

数据源展示区，用于响应保存操作，将保存的数据所对应的数据源ID进行渲染展示；

②、第二监听控制器

所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；

③、第一校验单元

所述第一校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验；

④、后端接口

所述后端接口，用于接收上传的EXCEL文件，对接收得到的EXCEL文件进行数据读取，对读取得到的EXCEL数据进行校验，将校验合格的EXCEL数据写入数据库，然后遍历数据库中的EXCEL数据来产生数据行，根据产生的数据行，生成新的EXCEL工作簿，接着将生成的EXCEL工作簿返回至第三前端界面；

⑤、第三前端界面，

所述第三前端界面，用于根据EXCEL工作簿的表格格式，将EXCEL工作簿中的数据进行显示，以及触发对显示的EXCEL工作簿中的数据执行保存操作；

⑥、第三保存单元

所述第三保存单元，用于响应所述的保存操作，根据所需保存的数据所对应的数据源ID，划分出对应的本地存储区域，令所需保存的数据存储在本地存储区域和/或备份在远程服务器中。

通过使用上述图表工具，用户仅需要选择确定输入的图表配置参数以及上传所需的数据源，便能生成所需的图表，然后，通过点击图表工具界面上的保存按钮对生成的图表进行存储，接着用户便可将存储后的图表，按照实际需要，以不同方式应用在不同场景中，例如，发布生成图表html应用、发布生成图表图片等。如图10所示，其为一图表应用后所显示的效果示意图。

由上述可得，通过使用本发明，可达到的优点包括有：

1、通过拖拽的操作，结合控件监听器，可以令用户以可视化的拖拽操作方式来实现图表工具生成，操作使用便利性高，而且无需任何前端开发基础、编程功底，适用于普遍大众人群，商用价值和兼容性高；

2、当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，按照预设的统一规范，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码，这样能保障代码的规范化，便于后续应用在各种不同场景中；

3、当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层，这样可以让用户在拖拽多媒体控件的时候，清晰知道操作正对哪一个多媒体控件进行操作、清楚了解当前被拖拽的按钮元素所对应的多媒体控件的相关信息、插件效果以及拖拽轨迹，从而大大增强用户操作的精确性、提高了人机交互操作体验、增强了适用性；

4、降低用户的图表工具使用门槛，本发明通过动态生成配置表单方式，便能利用简单的表单配置就能够渲染出所需要的图表，操作方便快捷，而且无需任何前端开发基础、编程功底，适用于普遍大众人群，商用价值和兼容性高；

5、兼容可视化前端配置工具，通过引入工具，能够解决部分可视化前端配置工具不能生成图表的功能，扩充了可视化前端配置工具的功能点；

6、用户仅需要将处理好的EXCEL文件进行上传后，便能完成图表工具所需要的数据源的配置，这样明显进一步地降低了使用者的操作门槛，令用户可更加便利地使用第三方图表工具；

7、兼容适用于可视化前端配置工具中，通过使用本发明，能便捷配置第三方图表工具的用于生成图表的数据源，明显提高了第三方图表工具的数据源配置操作效率，而且只需要上传一次EXCEL文件，便能重复使用数据源，操作便利性和灵活性高。可见，对于本发明的方案，可广泛应用在自定义报告系统中。

以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (9)

1.一种数据可视化实现系统，其特征在于：该系统包括：

第一前端界面，设置有控件区、画布编辑区和工具操作区；

第一监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码；其中，所述被拖拽的按钮元素所对应的多媒体控件为图表工具控件；所述图表工具控件的代码用于图表工具的生成；

生成的图表工具包括第二前端界面以及第二监听控制器；

所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于根据输入的图表配置参数，动态生成对应的配置代码，并在界面上进行展示的配置代码展示区；所述表单配置区包含基础配置区和参数配置区；所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；

所述第一监听控制器还用于当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储和显示有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

2.根据权利要求1所述一种数据可视化实现系统，其特征在于：所述第一监听控制器还用于根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中；其中，一个多媒体控件对应唯一一个id号。

3.根据权利要求1所述一种数据可视化实现系统，其特征在于：该系统还包括：

第一保存单元，用于将画布编辑区中的所有代码存储到本地缓存服务器和/或上传到远程服务器进行存储；

和/或，

第二保存单元，用于将操作数据存储到本地缓存服务器和/或上传到远程服务器进行存储。

4.根据权利要求1所述一种数据可视化实现系统，其特征在于：所述基础配置区用于提供基础配置参数表单，所述基础配置参数表单包括有第三方工具库表单、图表类型表单和/或配置模式表单，所述配置模式表单所提供选择的配置模式包括有基础表单配置模式、高级表单配置模式和/或代码模式；

所述第二监听控制器具体包括：

第一监听控制子模块，用于当监听得到的配置模式为基础表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块；

第二监听控制子模块，用于当监听得到的配置模式为高级表单配置模式时，则在参数配置区中动态加载并渲染出基础表单模块以及扩展表单模块；

和/或，

第三监听控制子模块，用于当监听得到的配置模式为代码模式时，则禁用参数配置区，并令配置代码展示区处于可编辑状态。

5.根据权利要求1所述一种数据可视化实现系统，其特征在于：所述生成的图表工具还包括：

第一校验单元，用于对参数配置区中的表单进行填写提示，以及对参数配置区中的表单所输入的配置信息进行监听校验。

6.根据权利要求1-5任一项所述一种数据可视化实现系统，其特征在于：所述第二前端界面还设置有用于上传EXCEL文件的输入表单，以及用于响应保存操作，将保存的数据所对应的数据源ID进行渲染展示的数据源展示区；其中，渲染展示的数据源ID用于被选取，从而调用对应的数据来生成匹配的图表后，令生成的图表渲染展示在图表渲染区中；

所述生成的图表工具还包括：

后端接口，用于接收上传的EXCEL文件，对接收得到的EXCEL文件进行数据读取，对读取得到的EXCEL数据进行校验，将校验合格的EXCEL数据写入数据库，然后遍历数据库中的EXCEL数据来产生数据行，根据产生的数据行，生成新的EXCEL工作簿，接着将生成的EXCEL工作簿返回至第三前端界面；

第三前端界面，用于根据EXCEL工作簿的表格格式，将EXCEL工作簿中的数据进行显示，以及触发对显示的EXCEL工作簿中的数据执行保存操作。

7.根据权利要求6所述一种数据可视化实现系统，其特征在于：该系统还包括：

第三保存单元，用于响应所述的保存操作，根据所需保存的数据所对应的数据源ID，划分出对应的本地存储区域，令所需保存的数据存储在本地存储区域和/或备份在远程服务器中。

8.一种数据可视化实现方法，其特征在于：该方法包括以下步骤：

对设置在控件区中的按钮元素进行拖拽操作行为的监听；

当监听到释放鼠标行为操作，以结束按钮元素的拖拽操作，且当前鼠标位置处于画布编辑区中时，在画布编辑区上生成渲染出被拖拽的按钮元素所对应的多媒体控件的代码；其中，所述被拖拽的按钮元素所对应的多媒体控件为图表工具控件；所述图表工具控件的代码用于图表工具的生成；

生成的图表工具包括第二前端界面以及第二监听控制器；

所述第二前端界面设置有用于提供图表配置参数表单的表单配置区、用于根据输入的图表配置参数和/或配置代码，渲染出对应图表的图表渲染区以及用于根据输入的图表配置参数，动态生成对应的配置代码，并在界面上进行展示的配置代码展示区；所述表单配置区包含基础配置区和参数配置区；所述第二监听控制器用于监听基础配置区的表单中所确定输入的基础配置参数，根据监听得到的基础配置参数，动态加载并渲染出相对应的参数配置区的表单；

所述第一监听控制器还用于当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储和显示有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

9.根据权利要求8所述一种数据可视化实现方法，其特征在于：该方法还包括以下步骤：

当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；

根据被拖拽的按钮元素所对应的多媒体控件的id号，获取对应的多媒体控件的页面信息及数据信息，并将获取得到的多媒体控件的页面信息及数据信息复制至临时层中进行存储和显示；

其中，一个多媒体控件对应唯一一个id号；所述临时层用于跟随鼠标移动轨迹进行移动，以及根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

Images