跳到主要内容

仪表盘共享与嵌入

Grafana 是一个强大的数据可视化工具，广泛用于监控和数据分析。在实际应用中，我们经常需要与他人共享仪表盘，或者将仪表盘嵌入到其他应用程序中。本文将详细介绍如何在 Grafana 中实现仪表盘的共享与嵌入，帮助初学者快速掌握这些功能。

什么是仪表盘共享与嵌入？​

仪表盘共享是指将 Grafana 仪表盘的访问权限授予他人，使他们能够查看或编辑仪表盘。仪表盘嵌入则是将仪表盘嵌入到其他网页或应用程序中，使其成为这些应用的一部分。

为什么需要共享与嵌入仪表盘？​

  • 协作：团队成员可以共同查看和编辑仪表盘，提高工作效率。
  • 集成：将仪表盘嵌入到其他应用程序中，如公司内部网站或客户门户，提供无缝的用户体验。
  • 展示：在演示或报告中嵌入仪表盘，直观展示数据。

仪表盘共享​

1. 通过链接共享​

Grafana 提供了直接通过链接共享仪表盘的功能。你可以生成一个唯一的 URL，并将其发送给需要访问仪表盘的人。

步骤：​

  1. 打开你想要共享的仪表盘。
  2. 点击右上角的 Share 按钮。
  3. 在 Link 选项卡中，复制生成的链接。
  4. 将链接发送给需要访问仪表盘的人。
备注

生成的链接可能会包含敏感信息，如 API 密钥或数据源配置。确保只与可信任的人共享链接。

2. 通过快照共享​

快照是仪表盘在某一时刻的静态副本。你可以生成一个快照，并将其共享给他人，即使他们没有访问 Grafana 的权限。

步骤：​

  1. 打开你想要共享的仪表盘。
  2. 点击右上角的 Share 按钮。
  3. 在 Snapshot 选项卡中，点击 Local Snapshot 生成快照。
  4. 复制生成的快照链接并发送给他人。
提示

快照是只读的，适合用于展示或报告场景。

仪表盘嵌入​

1. 使用 iframe 嵌入​

Grafana 允许通过 iframe 将仪表盘嵌入到其他网页中。这种方式简单直接，适合大多数场景。

步骤：​

  1. 打开你想要嵌入的仪表盘。
  2. 点击右上角的 Share 按钮。
  3. 在 Embed 选项卡中，复制生成的 iframe 代码。
  4. 将代码粘贴到你的网页中。
html
<iframe
  src="https://your-grafana-instance/d/your-dashboard-id"
  width="100%"
  height="600"
  frameborder="0">
</iframe>
警告

确保你的 Grafana 实例支持公共访问，或者嵌入的网页与 Grafana 实例在同一域内，以避免跨域问题。

2. 使用 Grafana API 嵌入​

对于更复杂的场景，你可以使用 Grafana 的 API 动态生成嵌入代码。这种方式适合需要动态调整仪表盘内容的场景。

示例：​

javascript
fetch('https://your-grafana-instance/api/dashboards/uid/your-dashboard-uid')
  .then(response => response.json())
  .then(data => {
    const iframe = document.createElement('iframe');
    iframe.src = data.meta.url;
    iframe.width = '100%';
    iframe.height = '600';
    document.body.appendChild(iframe);
  });
注意

使用 API 嵌入时，确保你有适当的权限，并且遵循 Grafana 的安全最佳实践。

实际应用场景​

场景 1：团队协作​

假设你是一个 DevOps 团队的成员，负责监控系统的性能。你可以通过共享仪表盘链接，让团队成员实时查看系统状态，并根据需要进行调整。

场景 2：客户报告​

你正在为客户准备一份报告，报告中需要展示系统的实时性能数据。你可以生成一个快照，并将其嵌入到报告中，客户无需访问 Grafana 即可查看数据。

场景 3：公司内部网站​

你的公司有一个内部网站，用于展示各种业务指标。你可以将 Grafana 仪表盘嵌入到网站中，使员工能够方便地查看关键数据。

总结​

通过本文，你已经学会了如何在 Grafana 中共享和嵌入仪表盘。无论是通过链接、快照，还是 iframe 和 API，这些功能都能帮助你更好地与他人协作，并将数据可视化集成到其他应用中。

附加资源与练习​

  • 练习 1：尝试在你的 Grafana 实例中创建一个仪表盘，并通过链接与同事共享。
  • 练习 2：将你的仪表盘嵌入到一个简单的 HTML 页面中，并测试其显示效果。
  • 附加资源：

希望这些内容能帮助你更好地理解和使用 Grafana 的仪表盘共享与嵌入功能！