grafana share 页面链接

本文介绍如何使用Grafana的分享功能,包括通过URL链接、iframe代码或生成图片URL分享图表。详细解释了如何调整时间范围、主题以及如何使用kiosk模式去除导航栏,以便更好地将图表集成到其他系统中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

grafana是一款不错的图表展示软件,通常将一些监控数据写入到graphite或者其他时序数据库中,然后通过grafana来展示图表。有时,我们需要在内部的系统中展示grafana中的某些图表(panel)或者dashboard,grafana正好提供了share功能,提供一个url连接,允许我们在其他系统中引入。

官方文档:https://grafana.com/docs/grafana/latest/linking/linking-overview/

接下来,我们做一个分享panel的示范。

点击share后,进入分享设置页面:

panel可以作为Link(一个页面url)、Embed(iframe代码),以及生成图片url 三种分享模式。

在url中可以通过参数来设置一些属性:

  • from: Defines the lower limit of the time range, specified in ms epoch.
  • to:Defines the upper limit of the time range, specified in ms epoch.
  • time and time.window: Define a time range from time-time.window/2 to time+time.window/2. Both params should be specified in ms. For example ?time=1500000000000&time.window=10000 will result in 10s time range from 1499999995000 to 1500000005000.
  • theme:dark、light

将url粘贴到浏览器或者ifram的代码粘贴到其他系统中,就可以展示分享的页面了。

有的时候,我们在panel中使用了grafana的template功能,如果要分享这样的panel,就不能使用ifram了,可以使用url展示分享panel,但是默认这个页面会带有导航栏,如果将这样的页面引入到其他系统中非常的不协调。如何去掉呢?

可以在url连接后面添加&kiosk即可解决。我们对比一下效果;

添加&kiosk后:

协调了许多。

参考github的issue:https://github.com/grafana/grafana/issues/11875

在官方查了一下kiosk这个参数,得知grafana支持TV-mode和kiosk-mode(信息亭)两种UI显示模式。

  • TV-mode:在电视模式下,顶部导航栏,行和面板控件将全部淡化为透明(自动识别的)
  • kiosk-mode:导航栏完全隐藏/从视图中删除。(添加&kiosk指定)

https://grafana.com/docs/grafana/latest/guides/whats-new-in-v4/#tv-mode-and-kiosk-mode

https://grafana.com/docs/grafana/latest/dashboards/playlist/#share-a-playlist-in-a-view-mode

并且有一个单独的github项目:https://github.com/grafana/grafana-kiosk

### 如何在 iframe 中内嵌 Grafana 仪表板 要在网页或其他应用程序中通过 `iframe` 嵌入 Grafana 仪表板,需按照特定的方法进行设置。这不仅涉及到 HTML 的编写还可能涉及 Grafana 配置调整。 #### 准备工作 确保拥有访问目标 Grafana 实例及其上所需展示仪表板的权限。获取该仪表板公开分享链接或是 API 访问令牌以便于后续配置[^1]。 #### 创建共享链接或嵌入代码 前往 Grafana Web 界面打开想要嵌入的仪表板页面,点击右上方菜单中的“Share”选项来创建一个可以直接用于 `<iframe>` 标签 src 属性内的 URL 或者直接复制现成的 Embeddable Code 片段[^2]。 #### 使用 iframe 进行嵌入 下面是一个简单的例子展示了如何利用获得的链接地址构建包含有 Grafana 报表视图的HTML片段: ```html <iframe width="800" height="600" frameborder="0" src="https://your-grafana-instance.com/d-solo/abcd1234/my-dashboard?orgId=1&refresh=5s"> </iframe> ``` 上述代码中替换 `"https://your-grafana-instance.com/d-solo/abcd1234/my-dashboard"` 成实际取得的有效路径即可实现报表显示功能;参数部分可根据需求自行增减如定时刷新(`refresh`)等特性[^3]。 #### 安全性和跨域资源共享(CORS) 当尝试从不同源加载资源时可能会遇到浏览器安全策略阻止请求的情况。此时需要确认服务器端已正确设置了 CORS 头部允许来自指定站点的内容读取操作,并且如果必要的话开启 Grafana 的匿名访问模式或者使用有效的 API Key 来验证身份[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赶路人儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值