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. Django简介以及基本使用

    目录 Django简介以及基本使用 一.django简介 1.web框架的本质是什么 ? 2.python主流web框架有那些 ? 3.web框架的推导过程 二.基本使用 1.运行django注意事项 ...

  2. [常用工具] Python视频解码库DeFFcode使用指北

    DeFFcode是一种跨平台的高性能视频帧解码器,通过内部封装ffmpeg,提供GPU解码支持,几行python代码就能够快速解码视频帧,并具有强大的错误处理能力.DeFFcode的APIs支持多种媒 ...

  3. VuePress个人博客搭建

    vuepress概述 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档 ...

  4. 《STL源码剖析》traits技法分析

    在完成一个迭代器的时候,我们可能会暴露太多的细节在外面,为了将这些细节给隐藏,我们需要封装,这也是为什么每一种STL容器都提供了一种专属的迭代器. 为了解决以"迭代器所指对象的型别" ...

  5. Linux基础操作-01

    Linux操作系统 很多IC设计的EDA工具都是在Linux系统中进行运行的,在IC设计的从业者都需要熟练掌握Linux操做.可以不掌握Linux原理,但是操作要熟练. Linux 操作系统的特点 多 ...

  6. Ubuntu 22.04 安装 utools 时的疑难杂症

    Error: libcrypto.so.1.1 原因:libcrypto.so.1.1 该依赖的版本不对,ubuntu 默认是使用的 openssl3 的依赖 这个是 openssl1 的 wget ...

  7. 商城网站商品sku选择的js简易实现

    商城网站商品sku选择的js简易实现 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta c ...

  8. 如何让Java编译器帮你写代码

    作者:京东零售 刘世杰 导读 本文结合京东监控埋点场景,对解决样板代码的技术选型方案进行分析,给出最终解决方案后,结合理论和实践进一步展开.通过关注文中的技术分析过程和技术场景,读者可收获一种样板代码 ...

  9. 注解_概念-注解_JDK内置注解

    注解_概念 注解: 概念:说明程序的.给计算机看的 注释:用文字描述程序的.给程序员看的 定义︰注解(Annotation),也叫元数据.一种代码级别的说明.它是J0K1.5及以后版本引久的一个特性, ...

  10. day04-视图和视图解析器

    视图和视图解析器 1.基本介绍 在SpringMVC中的目标方法,最终返回的都是一个视图(有各种视图) 注意,这里的视图是一个类对象,不是一个页面!! 返回的视图都会由一个视图解析器来处理(视图解析器 ...