CN107643935A - 一种重展示可扩展的数据可视化仪表盘及构建方法 - Google Patents
一种重展示可扩展的数据可视化仪表盘及构建方法 Download PDFInfo
- Publication number
- CN107643935A CN107643935A CN201710942202.1A CN201710942202A CN107643935A CN 107643935 A CN107643935 A CN 107643935A CN 201710942202 A CN201710942202 A CN 201710942202A CN 107643935 A CN107643935 A CN 107643935A
- Authority
- CN
- China
- Prior art keywords
- data
- perspective
- rear end
- instrument board
- view
- 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
Landscapes
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
本发明公开了一种重展示可扩展的数据可视化仪表盘及构建方法，包括前端和后端；后端用于负责数据的获取和处理，并返回数据给前端；前端包括用于展示的仪表盘组件和透视图组件；后端包括用于存放仪表盘配置，透视图配置的数据源位置和样式的Mongo配置数据库、用于存放初始化透视中的样例数据的样例静态文件数据库和用于存放用户自定义导入的数据源的Elasticsearch用户数据仓库；本发明在没有数据的情况下，依然能够使用系统，了解系统最终能做出仪表盘的样式。
Description
技术领域
本发明涉及数据可视化技术领域，具体涉及一种重展示可扩展的数据可视化仪表盘及构建方法。
背景技术
仪表盘也称为BI Dashboard，是一种高级的可视化展现形式；通常可以联合展示多种类型的可视化组件，如透视图(柱状图、折线图、饼图、散点图等)、文字、图片、数值等；传统的仪表盘的创建和使用流程一般都是先上传数据，然后对数据进行分析制作各种图表组件，最后在仪表盘中添加这些制作好了的图标组件；对于拥有海量数据的用户，这样的流程显得十分的消时，而且没有办法保证最终的仪表盘能满足用户的需求。
发明内容
本发明提供一种可首先展示仪表盘的样子然后进行数据上传及透视图制作的重展示可扩展的数据可视化仪表盘及构建方法。
本发明采用的技术方案是：
一种重展示可扩展的数据可视化仪表盘，包括前端和后端；后端用于负责数据的获取和处理，并返回数据给前端；前端包括用于展示的仪表盘组件和透视图组件；后端包括用于存放仪表盘配置，透视图配置的数据源位置和样式的Mongo配置数据库、用于存放初始化透视中的样例数据的样例静态文件数据库和用于存放用户自定义导入的数据源的Elasticsearch用户数据仓库。
进一步的，所述前端使用的控件结构如下：最外层仪表盘对ReactGridLayout进行封装，然后从外到内依次包括VisualLayout控件、Chart控件和Echarts。
一种重展示可扩展的数据可视化仪表盘的构建方法，包括以下步骤：
步骤1：进入仪表盘，仪表盘组件发出请求到后端，后端Mongo配置数据库中得到对应仪表盘配置返回前端；
步骤2：根据返回前端的数据渲染仪表盘框架，仪表盘内的透视图显示loading的占位符并留空；
步骤3：透视图组件发送请求到后端，后端Mongo配置数据库中得到透视图使用样式和数据源位置；若用户设置了数据源，后端从Elasticsearch用户数据仓库中得到对应数据；若未设置数据源，后端根据透视图样式从静态文件数据库中获取数据；
步骤4：后端将透视图的样式及对应数据返回前端；
步骤5：根据反馈回前端的数据和透视图样式，进行渲染得到需要的仪表盘展示结果。
进一步的，所述步骤1中仪表盘组件通过ajax请求到后端对应的rest api。
进一步的，所述步骤3中透视图组件各自发送ajax请求到后端对应的rest api。
本发明的有益效果是：
(1)本发明提供多套模板仪表盘，包含了带有样例数据的透视图，可直接展示最终仪表盘；
(2)本发明用户在选择仪表盘模板后，可在模板中添加常规图表、地图、文字、图片或者上传自己的组件；
(3)本发明用户可重新配置透视图的数据源代替样例数据，数据源支持csv、json、xml,常规数据库mysql、postgre等；
(4)本发明用户可设置图表组件样式，在没有数据的情况下，依然能够使用系统，了解系统最终能做出仪表盘的样式。
附图说明
图1为本发明的结构示意图。
图2为本发明前端的控件结构。
具体实施方式
下面结合附图和具体实施例对本发明做进一步说明。
如图1所示，一种重展示可扩展的数据可视化仪表盘，包括前端和后端；后端用于负责数据的获取和处理，并返回数据给前端；前端包括用于展示的仪表盘组件和透视图组件；后端包括用于存放仪表盘配置，透视图配置的数据源位置和样式的Mongo配置数据库、用于存放初始化透视中的样例数据的样例静态文件数据库和用于存放用户自定义导入的数据源的Elasticsearch用户数据仓库。
仪表盘配置包括控件位置和仪表盘样式，透视图配置包括透视图的数据源位置和透视图样式。
进一步的，所述前端使用的控件结构如下：最外层仪表盘对ReactGridLayout进行封装，然后从外到内依次包括VisualLayout控件、Chart控件和Echarts。
一种重展示可扩展的数据可视化仪表盘的构建方法，包括以下步骤：
步骤1：进入仪表盘，仪表盘组件发出请求到后端，后端Mongo配置数据库中得到对应仪表盘配置返回前端；
步骤2：根据返回前端的数据渲染仪表盘框架，仪表盘内的透视图显示loading的占位符并留空；
步骤3：透视图组件发送请求到后端，后端Mongo配置数据库中得到透视图使用样式和数据源位置；若用户设置了数据源，后端从Elasticsearch用户数据仓库中得到对应数据；若未设置数据源，后端根据透视图样式从静态文件数据库中获取数据；
步骤4：后端将透视图的样式及对应数据返回前端；
步骤5：根据反馈回前端的数据和透视图样式，进行渲染得到需要的仪表盘展示结果。
进一步的，所述步骤1中仪表盘组件通过ajax请求到后端对应的rest api。
进一步的，所述步骤3中透视图组件各自发送ajax请求到后端对应的rest api。
使用时，首先进入仪表盘，仪表盘组件会通过ajax请求到后端对应的rest api，后端会在Mongo配置数据库中找到对应的仪表盘配置，包括仪表盘大小、颜色，包含的组件位置等信息，返回给前端；前端收到仪表盘配置数据后，会渲染仪表盘的框架，这个时候仪表盘内的透视图会显示loading的占位符并留空；
然后，所有的透视图组件在渲染前，会各自发送ajax请求到后端对应的rest api，后端会从Mongo配置数据库中找到对应透视图使用的样式，以及数据的位置；如果用户设置了数据源，后端将会从elastic用户数据仓库中搜索对于对应数据；如果未经设置数源，后端将会根据透视图的类型从对应静态文件数据库中获取数据；把处理后的数据和样式返回给前端；
最后，前端透视图收到数据后，会根据样式和数据渲染自己，完整的仪表盘将会呈现在面前。
本发明中前端采用React技术，使用的核心控件结构如图2所示，最外层仪表盘对ReactGridLayout进行了封装，这样对于放在仪表盘中的子控件，就可以进行拖动和放大缩小操作；VisualLayout是一层逻辑控件，当数据为空时，VisualLayout会显示loading占位；当有数据时，VisualLayout会渲染对应Chart图表控件；Chart控件包含了很多类型，柱状图BarChart，线形图LineChart，地图MapChart等；这些控件内部其实都维护一个Echart的实例；Echart是一个纯JS图表库，提供了折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图、用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图treemap；图2中A为React GridLayout，B为VisualLayout控件，C为Chart控件，包括BarChart、LineChart，、MapChart等，E为Echart。
上述ReactGridLayout指一款开源的响应式栅格容器(https://github.com/STRML/react-grid-layout)；VisualLayout为本发明封装的可视化控件，用于在ReactGridLayout中展示的子控件，可以放大缩小和拖动位置；Chart图表控件为本发明封装的控件，用于在VisualLayout中展示Echart图表；Echart组件为百度提供的组件(http://echarts.baidu.com/)。
文中的，数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，提取有用信息和形成结论而对数据加以详细研究和概括总结的过程；这一过程也是质量管理体系的支持过程。在实用中，数据分析可帮助人们做出判断，以便采取适当行动；数据可视化是指利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。
文中，Mongo指一种文档导向的数据库(https://www.mongodb.com/cn)；elasticsearch指一种支持海量数据的数据仓库(https://www.elastic.co/cn/)；文中ajax请求指一种JS发出的http请求；rest api指后端提供的http形式的借口；loading指正在加载。
Claims (5)
1.一种重展示可扩展的数据可视化仪表盘，其特征在于，包括前端和后端；后端用于负责数据的获取和处理，并返回数据给前端；前端包括用于展示的仪表盘组件和透视图组件；后端包括用于存放仪表盘配置，透视图配置的数据源位置和样式的Mongo配置数据库、用于存放初始化透视中的样例数据的样例静态文件数据库和用于存放用户自定义导入的数据源的Elasticsearch用户数据仓库。
2.根据权利要求1所述的一种重展示可扩展的数据可视化仪表盘，其特征在于，所述前端使用的控件结构如下：最外层仪表盘对ReactGridLayout进行封装，然后从外到内依次包括VisualLayout可视化控件、Chart图表控件和Echarts组件。
3.如权利要求1所述的一种重展示可扩展的数据可视化仪表盘的构建方法，其特征在于，包括以下步骤：
步骤1：进入仪表盘，仪表盘组件发出请求到后端，后端Mongo配置数据库中得到对应仪表盘配置返回前端；
步骤2：根据返回前端的数据渲染仪表盘框架，仪表盘内的透视图显示loading的占位符并留空；
步骤3：透视图组件发送请求到后端，后端Mongo配置数据库中得到透视图使用样式和数据源位置；若用户设置了数据源，后端从Elasticsearch用户数据仓库中得到对应数据；若未设置数据源，后端根据透视图样式从静态文件数据库中获取数据；
步骤4：后端将透视图的样式及对应数据返回前端；
步骤5：根据反馈回前端的数据和透视图样式，进行渲染得到需要的仪表盘展示结果。
4.根据权利要求3所述的一种重展示可扩展的数据可视化仪表盘的构建方法，其特征在于，所述步骤1中仪表盘组件通过ajax请求到后端对应的rest api。
5.根据权利要求3所述的一种重展示可扩展的数据可视化仪表盘的构建方法，其特征在于，所述步骤3中透视图组件各自发送ajax请求到后端对应的rest api。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710942202.1A CN107643935A (zh) | 2017-10-11 | 2017-10-11 | 一种重展示可扩展的数据可视化仪表盘及构建方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710942202.1A CN107643935A (zh) | 2017-10-11 | 2017-10-11 | 一种重展示可扩展的数据可视化仪表盘及构建方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107643935A true CN107643935A (zh) | 2018-01-30 |
Family
ID=61113716
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710942202.1A Pending CN107643935A (zh) | 2017-10-11 | 2017-10-11 | 一种重展示可扩展的数据可视化仪表盘及构建方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107643935A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110673886A (zh) * | 2018-07-03 | 2020-01-10 | 百度在线网络技术（北京）有限公司 | 用于生成热力图的方法和装置 |
| CN112732261A (zh) * | 2021-01-19 | 2021-04-30 | 加和（北京）信息科技有限公司 | 仪表盘的构建方法和装置 |
| CN114416238A (zh) * | 2021-12-28 | 2022-04-29 | 成都易达数安科技有限公司 | 一种基于动态布局技术的仪表盘智能配置方法 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101710280A (zh) * | 2009-11-05 | 2010-05-19 | 金蝶软件（中国）有限公司 | Bi产品构件的封装方法及装置 |
| CN106354786A (zh) * | 2016-08-23 | 2017-01-25 | 冯村 | 一种可视分析方法及系统 |
| CN106874353A (zh) * | 2016-12-28 | 2017-06-20 | 合肥智畅信息科技有限公司 | 一种操作型商业智能应用系统 |
-
2017
- 2017-10-11 CN CN201710942202.1A patent/CN107643935A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101710280A (zh) * | 2009-11-05 | 2010-05-19 | 金蝶软件（中国）有限公司 | Bi产品构件的封装方法及装置 |
| CN106354786A (zh) * | 2016-08-23 | 2017-01-25 | 冯村 | 一种可视分析方法及系统 |
| CN106874353A (zh) * | 2016-12-28 | 2017-06-20 | 合肥智畅信息科技有限公司 | 一种操作型商业智能应用系统 |
Non-Patent Citations (1)
| Title |
|---|
| BERNARDO DE CASTILHO: ""How to Create a Dynamic Dashboard in React"", 《HTTPS://WWW.GRAPECITY.COM/BLOGS/CREATE-DYNAMIC-DASHBOARD-REACT》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110673886A (zh) * | 2018-07-03 | 2020-01-10 | 百度在线网络技术（北京）有限公司 | 用于生成热力图的方法和装置 |
| CN110673886B (zh) * | 2018-07-03 | 2023-10-03 | 百度在线网络技术（北京）有限公司 | 用于生成热力图的方法和装置 |
| CN112732261A (zh) * | 2021-01-19 | 2021-04-30 | 加和（北京）信息科技有限公司 | 仪表盘的构建方法和装置 |
| CN114416238A (zh) * | 2021-12-28 | 2022-04-29 | 成都易达数安科技有限公司 | 一种基于动态布局技术的仪表盘智能配置方法 |
| CN114416238B (zh) * | 2021-12-28 | 2023-08-25 | 成都易达数安科技有限公司 | 一种基于动态布局技术的仪表盘智能配置方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9224222B2 (en) | Interactive multidimensional drilldown analysis | |
| CN109478302A (zh) | 流时间线社交网络 | |
| CN112933597B (zh) | 图像处理方法、装置、计算机设备及存储介质 | |
| CN107132912B (zh) | 一种gis与bim增强现实在建筑规划的互动演示方法及系统 | |
| CN105229696A (zh) | 用于多维数据存取的并行存储器 | |
| CN107705193A (zh) | 定制商品的展示方法和系统 | |
| DE202017105760U1 (de) | Zerlegung dynamischer grafischer Benutzeroberflächen | |
| CN108734749A (zh) | 图像的视觉风格变换 | |
| CN108780389A (zh) | 用于计算设备的图像检索 | |
| CN107643935A (zh) | 一种重展示可扩展的数据可视化仪表盘及构建方法 | |
| CN108229496A (zh) | 服饰关键点的检测方法和装置、电子设备、存储介质和程序 | |
| CN108074278A (zh) | 视频呈现方法、装置和设备 | |
| CN106846429A (zh) | 一种家庭装饰设计系统 | |
| CN108595604A (zh) | 一种智能报表的数据可视化系统及方法 | |
| CN108229363A (zh) | 关键帧调度方法和装置、电子设备、程序和介质 | |
| Bown | Attributing Creative Agency: Are we doing it right? | |
| CN109766373A (zh) | 电网数据展示方法及计算机可读存储介质 | |
| CN101981578A (zh) | 用于协同设计头像或其他图形结构的方法和装置 | |
| CN105808682A (zh) | 一种关系图展示的方法和装置 | |
| CN110188801A (zh) | 图像识别方法、装置、电子设备及存储介质 | |
| CN106569949A (zh) | 用于执行测试用例的方法和装置 | |
| US20230421820A1 (en) | Real-time video feed presentation enhancement system | |
| CN107247785A (zh) | 一种静态只读地图文件生成方法和装置 | |
| CN107749074A (zh) | 一种用于绘制地图的方法、装置和计算设备 | |
| WO2018017692A1 (en) | Composite user interface |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180130 |