本发明属于大数据可视化领域,是一种基于拖拽配置可视化大屏的方法。
背景技术:
在当前大数据可视化领域大屏展示是一种展示数据的最有效手段之一,但是大屏的构建往往及其费时、繁琐。
当前对于大屏的构建一般有几种方法包括:
①通过划分不同的功能区域每种功能区域配置数据、配置相应的样式和布局等属性进行构建,这种方法构建大屏方法每次配置一个功能区域都需要配置数据、修改样式、修改布局非常的繁琐费时且无法重复利用配置好的功能区域。
②通过确定的内容直接构建大屏,这种方法构建大屏更加不具有可复用性,往往每构建一个大屏就需要编写不同的html代码和后台服务代码,更加费时、费力。
技术实现要素:
本发明主要目的是针对现在技术的不足,提供一种基于拖拽配置可视化大屏的方法。
本发明解决其技术问题所采用的技术方案包括如下具体步骤:
步骤(1)、构建基础图表,具体构建图表报表如下:
①选择基础图表的类型,包括饼状图、柱状图、桑基图等;
②配置构建基础图表所需的数据源,如:mysql、oracle、json;
③配置基础图表的基本属性,如柱状图的宽、高,饼状图的半径等
④对配置完成的基础图表的建立唯一标识符id,并保存基础图表的相关信息到数据库;相关信息包括基础图表的类型、基础图表所需数据源、基础图表的基本属性和基础图表的id;
步骤(2)、建立可视化区域并配置该可视化区域大小;
步骤(3)、将步骤(1)建立的的基础图表选择并拖拽到可视化区域的合适位置,渲染可视化图表;基础图表拖拽渲染的具体步骤如下:
3-1.监听基础图表的选中拖拽事件,从而获得被拖拽的基础图表的唯一标识符id;
3-2.基础图表拖拽到可视化区域内部后,获取可视化区域中当前鼠标指针的位置(x,y),在位置(x,y)处构建一个能够进行拖拽和缩放的dom节点;
3-3.根据基础图表的唯一标识符id从数据库中获取基础图表的相关信息来渲染图表;
3-4.拖拽、缩放步骤3-2生成的dom节点,使得该基础图表更契合大屏的展示。
本发明有益效果如下:
(1)可视化大屏的构建不再繁琐、费时,只需拖动已经构建好的基础图表即可
(2)本发明能够使得不同的大屏可以共用已经构建好的基础图表;
⑶本发明方法操作简单,直接拖拽即可。
具体实施方式
下面结合实施例对本发明作进一步说明。
一种基于拖拽配置可视化大屏的方法,包括如下具体步骤:
步骤(1)、构建基础图表,具体构建图表报表如下:
①选择基础图表的类型,包括饼状图、柱状图、桑基图等;
②配置构建基础图表所需的数据源,如:mysql、oracle、json;
③配置基础图表的基本属性,如柱状图的宽、高,饼状图的半径等
④对配置完成的基础图表的建立唯一标识符id,并保存基础图表的相关信息到数据库;相关信息包括基础图表的类型、基础图表所需数据源、基础图表的基本属性和基础图表的id;
步骤(2)、建立可视化区域并配置该可视化区域大小;
步骤(3)、将步骤(1)建立的的基础图表选择并拖拽到可视化区域的合适位置,渲染可视化图表;基础图表拖拽渲染的具体步骤如下:
3-1.监听基础图表的选中拖拽事件,从而获得被拖拽的基础图表的唯一标识符id;
3-2.基础图表拖拽到可视化区域内部后,获取可视化区域中当前鼠标指针的位置(x,y),在位置(x,y)处构建一个能够进行拖拽和缩放的dom节点;
3-3.根据基础图表的唯一标识符id从数据库中获取基础图表的相关信息来渲染图表;
3-4.拖拽、缩放步骤3-2生成的dom节点,使得该基础图表更契合大屏的展示。