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. linux环境编程(1): 实现一个单元测试框架

    写在前面 在开发的过程中,大多数人都需要对代码进行测试.目前对于c/c++项目,可以采用google的gtest框架,除此之外在github上搜索之后可以发现很多其他类似功能的项目.但把别人的轮子直接 ...

  2. Thread和Runnable的区别-匿名内部类方式实现线程的创建

    Thread和Runnable的区别 如果一个类继承Thread ,则不适合资源共享.但是如果实现了Runable接口的话,则很容易的实现资源共享. 总结: 实现Runnable接口比继承Thread ...

  3. MySQL 如何实现数据插入

    使用MySQL插入数据时,可以根据需求场景选择合适的插入语句,例如当数据重复时如何插入数据,如何从另一个表导入数据,如何批量插入数据等场景.本文通过给出每个使用场景下的实例来说明数据插入的实现过程和方 ...

  4. JSP第八次作业

    数据库test 中建个表 stu(stuid 主键 自动增长 ,用户名,密码,年龄) 1.设计一个注册页面,实现用户注册功能2.设计一个登陆页面,实现用户名密码登陆3.两个页面可以互相超链接 1 pa ...

  5. 简述 Gin 框架如何集成swagger

    https://blog.csdn.net/raogeeg/article/details/86743953 @Title           这个 API 所表达的含义,是一个文本,空格之后的内容全 ...

  6. 如何注册chatgpt，如何使用chatgpt，以及chatgpt无法访问的原因。chatgpt问题总结。

    chatgpt显示所在的国家地区不可用的原因. 1:chatgpt国内是不能访问的,是需要借助魔法. 一.注册过程中的问题. \1. OpenAI或ChatGPT官网打不开.这是由于ChatGPT目前 ...

  7. Ribbon负载均衡 (源码分析)

    Ribbon负载均衡 SpringCloud已经删除了ribbon组件,所以需要手动导入依赖.(要学是因为很多项目业务已经使用了ribbon) 服务拉取的时候添加了@LoadBalanced注解,实现 ...

  8. WPF 使用动画绘制一个点赞大拇指

    效果图 好久没有写wpf了. 最近看到飞书的点赞动画非常有意思,决定试试,虽然不及飞书那样的绚丽,但是练手还是可以的,希望自己的手艺还在! 那么如何写一个这样的动画呢? 首先需要刨析这个动画的构成: ...

  9. elasticsearch-head-master安装

    1 简介 elasticsearch-head是一款专门针对于elasticsearch的客户端工具,elasticsearch-head是一个基于node.js的前端工程 2 依赖 需要安装node ...

  10. Visual Studio 集成了.NET 升级助手插件

    .NET团队2023年2月16日在官方博客上发布了名为".NET Upgrade Assistant"的全新 Visual Studio 扩展,帮助开发人员升级.NET 应用程序. ...