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. 初识argparse 模块

    # 1引入模块 import argparse # 2建立解析对象 parser = argparse.ArgumentParser() # 3增加属性:给xx实例增加一个aa属性 # xx.add_ ...

  2. [图像处理] YUV图像处理入门3

    5 yuv420格式的灰阶测试图 本程序中的函数主要是为YUV420P视频数据流的第一帧图像添加边框.函数的代码如下所示: /** * @file 5 yuv_graybar.cpp * @autho ...

  3. [编程基础] C++多线程入门3-小心地将参数传递给线程

    原始C++标准仅支持单线程编程.新的C++标准(称为c++11或c++0x)于2011年发布.在c++11中,引入了新的线程库.因此运行本文程序需要C++至少符合c++11标准. 文章目录 3 小心地 ...

  4. 为什么网络I/O会被阻塞？

    摘要:I/O 其实就是 input 和 output 的缩写,即输入/输出. 本文分享自华为云社区<为啥网络IO会被阻塞呢>,作者: 龙哥手记. 我们应该都知道 socket(套接字),你 ...

  5. 使用Logstash工具导入sqlserver数据到elasticSearch及elk分布式日志中心

    首先记下这个笔记,Logstash工具导入sqlserver数据到elasticSearch. 因为logstash使用java写的,我本地开发是win11,所以javade jdk必须要安装.具体安 ...

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

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

  7. 【分析笔记】Linux 内核自旋锁的理解和使用原则

    自旋锁简单说明: 自旋锁主要解决在竞态并发下,保护执行时间很短的临界区.它只允许一个执行单位进入临界区,在该执行单位离开前,其它的执行单位将会在进入临界区前不停的循环等待(即所谓的自旋),直至该执行单 ...

  8. 【学习日志】Java8的CompletableFuture

    Java 8引入的CompletableFuture,对Future做了改进: 1.可以传入回调对象,不再像Future那样循环查询执行结果. 2.另外可以将多个Future结合到一起并行或串行执行, ...

  9. ACID和CAP的比较

    https://www.jdon.com/artichect/acid-cap.html 1 简介 事务机制ACID和CAP理论是数据管理和分布式系统中两个重要的概念,很不巧,这两个概念中都有相同的& ...

  10. 【源码】RapidJSON 源码剖析(0)：关于 RapidJSON

    RapidJSON 源码剖析(0):关于 RapidJSON 为什么会有<RapidJSON 源码剖析>系列博文? 之前转载的 Technique to Read Source Code ...