分分彩网站汽车仪表有限公司欢迎您!
一种分分彩网站重展示可扩展的数据可视化仪表

一种分分彩网站重展示可扩展的数据可视化仪表

  本出现涉及数据可视化工夫界限,实在涉及一种重闪现可扩展的数据可视化仪外盘及构修法子。

  仪外盘也称为BI Dashboard,是一种高级的可视化外示形状;平淡能够纠合闪现众品种型的可视化组件,如透视图(柱状图、折线图、饼图、散点图等)、文字、图片、数值等;古代的仪外盘的创修和行使流程大凡都是先上传数据,然后对数据举办阐述修制种种图外组件,结尾正在仪外盘中增加这些修制好了的图标组件;对付具有海量数据的用户,如此的流程显得万分的消时,并且没有法子保障最终的仪外盘能餍足用户的需求。

  本出现供给一种可最先闪现仪外盘的姿态然后举办数据上传及透视图修制的重闪现可扩展的数据可视化仪外盘及构修法子。

  一种重闪现可扩展的数据可视化仪外盘,网罗前端和后端;后端用于掌握数据的获取和治理,并返回数据给前端;前端网罗用于闪现的仪外盘组件和透视图组件;后端网罗用于存放仪外盘摆设,透视图摆设的数据源地位和样式的Mongo摆设数据库、用于存放初始化透视中的样例数据的样例静态文献数据库和用于存放用户自界说导入的数据源的Elasticsearch用户数据栈房。

  进一步的,所述前端行使的控件构造如下:最外层仪外盘对ReactGridLayout举办封装,然后从外到内依序网罗VisualLayout控件、Chart控件和Echarts。

  步伐1:进入仪外盘,仪外盘组件发出苦求到后端,后端Mongo摆设数据库中获得对应仪外盘摆设返回前端;

  步伐2:凭据返回前端的数据烘托仪外盘框架,仪外盘内的透视图显示loading的占位符并留空;

  步伐3:透视图组件发送苦求到后端,后端Mongo摆设数据库中获得透视图行使样式和数据源地位;若用户创立了数据源,后端从Elasticsearch用户数据栈房中获得对应数据;若未创立数据源,后端凭据透视图样式从静态文献数据库中获取数据;

  步伐5:凭据反应回前端的数据和透视图样式,举办烘托获得必要的仪外盘闪现结果。

  进一步的,所述步伐1中仪外盘组件通过ajax苦求到后端对应的rest api。

  进一步的,所述步伐3中透视图组件各自觉送ajax苦求到后端对应的rest api。

  (1)本出现供给众套模板仪外盘,包罗了带有样例数据的透视图,可直接闪现最终仪外盘;

  (2)本出现用户正在采用仪外盘模板后,可正在模板中增加旧例图外、分分彩网站舆图、文字、图片或者上传本人的组件;

  (3)本出现用户可从新摆设透视图的数据源庖代样例数据,数据源援助csv、json、xml,旧例数据库mysql、postgre等;

  (4)本出现用户可创立图外组件样式,正在没少睹据的处境下,已经可能行使体例,分析体例最终能做出仪外盘的样式。

  如图1所示,一种重闪现可扩展的数据可视化仪外盘,网罗前端和后端;后端用于掌握数据的获取和治理,并返回数据给前端;前端网罗用于闪现的仪外盘组件和透视图组件;后端网罗用于存放仪外盘摆设,透视图摆设的数据源地位和样式的Mongo摆设数据库、用于存放初始化透视中的样例数据的样例静态文献数据库和用于存放用户自界说导入的数据源的Elasticsearch用户数据栈房。

  仪外盘摆设网罗控件地位和仪外盘样式,透视图摆设网罗透视图的数据源地位和透视图样式。

  进一步的,所述前端行使的控件构造如下:最外层仪外盘对ReactGridLayout举办封装,然后从外到内依序网罗VisualLayout控件、Chart控件和Echarts。

  步伐1:进入仪外盘,仪外盘组件发出苦求到后端,后端Mongo摆设数据库中获得对应仪外盘摆设返回前端;

  步伐2:凭据返回前端的数据烘托仪外盘框架,仪外盘内的透视图显示loading的占位符并留空;

  步伐3:透视图组件发送苦求到后端,后端Mongo摆设数据库中获得透视图行使样式和数据源地位;若用户创立了数据源,后端从Elasticsearch用户数据栈房中获得对应数据;若未创立数据源,后端凭据透视图样式从静态文献数据库中获取数据;

  步伐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指一款开源的相应式栅格容器(;VisualLayout为本出现封装的可视化控件,用于正在ReactGridLayout中闪现的子控件,能够放大缩小和拖动地位;Chart图外控件为本出现封装的控件,用于正在VisualLayout中闪现Echart图外;Echart组件为百度供给的组件(。

  文中的,数据阐述是指用合适的统计阐述法子对网罗来的大方数据举办阐述,提取有效音信和造成结论而对数据加以周到查究和概述总结的历程;这一历程也是质地解决系统的援助历程。正在适用中,数据阐述可助助人们做出判别,以便采用合适行径;数据可视化是指使用图形、图像治理、阴谋机视觉以及用户界面,通过外达、修模以及对立体、轮廓、属性以及动画的显示,对数据加以可视化注脚。

  文中,Mongo指一种文档导向的数据库(;elasticsearch指一种援助海量数据的数据栈房(;文中ajax苦求指一种JS发出的http苦求;rest api指后端供给的http形状的藉端;loading郢正正在加载。

相关产品推荐

友情链接:

在线客服 :     服务热线: 4008-668-998     电子邮箱: 329465598@qq.com

分分彩网站 于2010年成立,专业经营各项彩票业务,现与AK平台合作,推出高频彩票现金投注网,开种广东快乐十分、重庆时彩、北京快乐8、北京赛车PK10等项目,完全自助注册开户,现金开户, 现金投注。我们拥有稳定的平台,成...

Copyright © 分分彩网站汽车仪表有限公司 版权所有