1.首先修改grafana的配置:etc/grafana/grafana.ini，修改下面这两个配置为true

2.由于项目使用了nginx，要启用https,需要修改下面这几个配置：（不需要启用https的可以跳过这一步）

使用nginx代理需要设置allowed-origins，否则websoket连接会报400

nginx配置文件中增加grafana的配置：

nginx必须增加/grafana/api/live/ws的配置，否则websoket连接会报400

3.html文件中增加iframe:

<iframe id="grafanaIframe" src="https://127.0.0.1:3000/grafana/d/ySz1PSF7k/influxdb-internals?orgId=1&from=1619857983343&to=1619857983343&theme=light&kiosk" height="800" width="1800"></iframe>

其中theme=light指主题颜色使用light,kiosk是隐藏左侧菜单、上方工具条

4.vue.config.js配置代理：（用于匿名登录）

注意：iframe中src链接可以到grafana中获取

grafana嵌入iframe，去除菜单和上方工具条的更多相关文章

  1. 黄聪：自定义WordPress前台、后台顶部菜单栏管理工具条的技巧

    使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php  或者插 ...

  2. 黄聪：自定义WordPress顶部管理工具条的技巧（转）

    使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php  或者插 ...

  3. 将Grafana嵌入自己的应用

    什么是Grafana Grafana是一款强大的可视化工具,无论数据存储在哪里,都可以查询.可视化.警报和理解您的数据.使用Grafana,您可以通过美丽.灵活的仪表板创建.探索和共享所有数据. 场景 ...

  4. session失效后，登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  5. QT学习之路--菜单、工具条、状态栏

    下面一些是 Menu Bar,用于显示菜单;再下面一点事 Toolbar areas,用于显示工具条,Status Bar,就是状态栏. Qt 提供了一个 QStatusBar 类来实现状态栏. Qt ...

  6. 响应式嵌入 iframe Pym.js

    Pym.js 可以让你在嵌入 iframe 的时候可自动的对 iframe 的大小进行调整以适应父一层容器,并且可以避免跨域问题. 支持浏览器: Internet Explorer 9, 10 (Wi ...

  7. 去除菜单项的加速键--‘&’符号

    去除菜单项的加速键--‘&’符号 ---------PopupMenu的AutoHotKeys(不用设置每个Item的这个属性)设置为maManual就行了

  8. Qt__主窗口、菜单和工具条(QMainWindow,QMenu,QToolBar)

    转自豆子空间 主窗口 Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow.MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域: 最上面是Wind ...

  9. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  10. 判断页面是否被嵌入iframe里面

    最近在做一个项目,是一个小型的后台管理系统,这个系统可以单独打开,也可以嵌入公司大型的后台管理项目里面 这样就存在一个问题,在被嵌入大的后台管理系统后,不用显示该页面顶部导航栏和左侧的菜单栏 所以我们 ...

随机推荐

  1. ssm——springMVC整理

    目录 1.概念 1.1.什么是SpringMVC 1.2.B/S架构 1.3.MVC结构 1.4.Spring MVC常用名词 1.5.常用注解 1.6.rest和restfull 1.7.Reque ...

  2. 分享一个自己封装且一直在维护的依赖.net4.5的http异步组包工具类(支持get,post( 表单 ，json, 包含图片等文件的流提交) ,cookie管理，自动跳转,代理IP,https的支持,高并发的配置等等

    1.)Nuget安装: 搜索 ConfigLab.Comp, 安装最新版即可. 2.)组包示例. 2.1)模拟post表单提交并包含普通参数和一个图片文件(基于HttpFileUploadAssist ...

  3. 一步步教你在Edge浏览器上安装网风笔记

    微软于2022年6月15日正式结束对浏览器"Internet Explorer (IE)"的支持,IE已正式退出历史舞台,取而代之的是目前风头正盛的被微软称为当今最好用的Edge浏 ...

  4. Redis 中ZSET数据类型命令使用及对应场景总结

    转载请注明出处: 目录 1.zadd添加元素 2.zrem 从有序集合key中删除元素 3.zscore 返回有序集合key中元素member的分值 4.zincrby 为有序集合key中元素增加分值 ...

  5. Java基于内存的消息队列实现

    Java基于内存的消息队列实现 有需要源码的同学可以去Gitee上下载: https://gitee.com/hyxl-520/memory_message_queue 先看测试情况 需求背景 需求来 ...

  6. Hadoop详解(03)-Hadoop编译源码-了解

    Hadoop详解(03)-Hadoop编译源码-了解 准备工作 CentOS联网 配置CentOS能连接外网.Linux虚拟机ping www.baidu.com 是畅通的 jar包准备(hadoop ...

  7. emqtt-bench

    安装 安装环境:Centos7 安装包:emqtt-bench-0.4.6-alpha.2-centos7-amd64.tar.gz 建议使用已编译好的发行包进行安装,源码编译已踩坑. # 创建存放目 ...

  8. [cocos2d-x]判断两个矩形是否有交叉区域

    bool Rect::intersectsRect(const Rect& rect) const { return !( getMaxX() < rect.getMinX() || r ...

  9. 对于Java平台的理解

    谈谈你对 Java 平台的理解?"Java 是解释执行",这句话正确吗?   Java 本身是一种面向对象的语言,最显著的特性有两个方面,一是所谓的"一处编译,处处运行& ...

  10. 创建型模式 - 原型模式Prototype

    孩子生来没娘的NT审核机制,又开始说我涉及到广告了,我涉及到什么广告了?我接着发. 学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 所属:创建型模式  原型模式 一般会和 工场 ...