如何在Angular应用中仅嵌入Grafana仪表盘的面板区域？

核心方案：通过URL参数控制显示内容 #

在你获取的分享URL中添加特定参数，就能隐藏编辑按钮、顶部导航等多余元素，只保留面板区域。

关键参数说明 #

• kiosk=tv：隐藏顶部导航栏、侧边栏，仅展示面板内容
• kiosk=full：在tv模式基础上移除所有边距，面板占满整个iframe
• hide-controls=true：隐藏面板右上角的编辑、全屏等控制按钮
• theme=light/theme=dark：按需指定主题（适配Angular应用风格）

修改后的URL示例 #

假设原分享URL为：
https://your-grafana/d/xyz123/your-dashboard?orgId=1

添加参数后（以tv模式+隐藏控制按钮为例）：
https://your-grafana/d/xyz123/your-dashboard?orgId=1&kiosk=tv&hide-controls=true

Angular中嵌入的模板代码示例 #

在组件模板里使用iframe嵌入修改后的URL：

<iframe
  src="https://your-grafana/d/xyz123/your-dashboard?orgId=1&kiosk=tv&hide-controls=true"
  width="100%"
  height="700px"
  frameborder="0"
></iframe>

额外注意点 #

• 确认Grafana允许嵌入：检查配置文件中allow_embedding是否设为true
• 私有仪表盘需处理认证：可添加token参数传入嵌入令牌，比如&token=your-embed-token
• 调整iframe的宽高样式，适配你的Angular页面布局

内容的提问来源于stack exchange，提问作者Bells