0
点赞
收藏
分享

微信扫一扫

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示


前期准备

搭建自己的数据分析、统计、展示、报表平台。参考下列文章:

​​2019玩转TIG(Telegraf+Influxdb+Grafana),轻松几步搭建环境,通过各种表盘展示数据,对数据进行实时监控和分析(下)​​

​​2019玩转ELK(ElasticSearch + LogStash + Kibana = ELKStack),轻松几步搭建ELK环境,对数据进行实时监控和分析(下)​​

这两篇文章都有上一部分,有需要的可以去文章列表专栏查看。

目的

把数据分析与数据统计、展示、报表的Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示。

Grafana集成到自己的Web项目

Web项目中我使用iframe直接嵌套进去的

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Web项目集成


但是浏览器缓存清除了或者session失效了,每次进入Web页面看Grafana的时候就需要重新登录,在官方社区查找,并没有太好的执行办法,最后决定把Grafana设置成匿名登录:

修改conf/ custom.ini目录下的默认配置文件内容:
找到:# enable anonymous access

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Web项目集成_02

然后重启grafana服务(systemctl restart grafana-server)就可以。

分享主页

.

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Grafana_03


Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Web项目集成_04


Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_ELK_05

分享单个图表

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_ELK_06


Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Grafana_07


Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Grafana_08

结果如下

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Web项目集成_09

图表连接

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Grafana_10

设置报警

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_数据报表展示_11

显示数据表

与图配合使用,显得更友好。

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_Grafana_12


Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_TIG_13


最后以数据表的形式展现。在图上面添加连接,跳转到表上面。

Grafana集成到自己的Web项目,通过搭建自己的实时数据监测与分析平台,把报表和图形展示集成到web项目进行整合开发,在网页上实现类似于Echarts的图形展示,构建领导驾驶舱大屏炫酷数据展示_ELK_14

分享连接同上面一样。


举报
0 条评论