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. java注解基础知识整理

    目录 1.注解的定义 1.1.定义一个注解 1.2.注解的使用 2.JDK内置注解 2.1.java.lang包下的注释类型 2.2.元注解 2.3.Deprecated注解 3.在注解中定义属性 3 ...

  2. 深入理解 dbt 增量模型

    想要实现数据增量写入数据库,可以选择 dbt 增量模型.通过 dbt 增量模型,我们只用专注于写日增 SQL,不用去关注于如何安全的实现增量写入. dbt 增量模型解决了什么问题 原子性写入:任何情况 ...

  3. CTF-MISC方向涉及技术导图

    MISC方向涉及技术导图  

  4. 这可能是Feign调用可重试的最佳方案了

    前言 在我们公司里,不同的服务之间通过Feign进行远程调用,但是,我们在尝试使调用可重试时遇到了一个小问题,Feign框架本身可以配置的自己的重试机制,但是它是一刀切的方式,所有的调用都是同样的机制 ...

  5. SQL中常用函数操作

    --在SQL SERVER中批量替换字符串的方法 update [Table] set [Field] = REPLACE([Field],'被替换的原内容','要替换的内容') update HBb ...

  6. Python中的枚举类enum

    0. 本文来历 上一篇文章,我写了Pytest插件pytest-order指定用例顺序 我当时就比较好奇它的顺序和英文的对应关系,肯定是写死的,找了下就发现在源码sorter.py中定义了一个dict ...

  7. undefined会变为null吗？

    echarts 会将 series data中的数据并不是你想的那样简单 我们很多小伙伴都使用过echarts. 然后 series:[{ data:[] }] 中的数据可能并没有我们想的那样简单 为 ...

  8. @mapper注解

    1.标记这是一个映射接口,这样子写还是需要写xml文件 package com.atguigu.springcloud.dao; import com.atguigu.springcloud.enti ...

  9. 免杀之：MSF后门metasploit-loader免杀

    免杀之:MSF后门metasploit-loader免杀 目录 免杀之:MSF后门metasploit-loader免杀 1 metasploit-loader后门代码 2 在kali中编译metas ...

  10. Sonarqube安装（Docker）

    一,拉取相关镜像并运行 # 拉取sonarqube镜像 docker pull sonarqube:9.1.0-community 在运行之前要提前安装postgres并允许,新建数据库名为sonar ...