Grafana嵌入其它页面如何去掉侧边栏

grafana是非常流行的可视化工具，在工作中我们经常需要将grafana面板与其它页面进行集成。但是侧边栏就显得有些多余，那如何去掉侧边栏呢？

网上说的最多的方案就是在URL后面加上参数 "&kiosk=tv"，可是这样就全部隐藏掉了，无法满足需求。

经过多次尝试，最终发现一种比较好的方法，记录一下。

嵌入其它的页面的前提条件是开启允许嵌入以及允许匿名登录

找到Grafana的配置文件

vim conf/grafana.ini

# 允许嵌入
allow_embedding = true

# 允许匿名登录
[auth.anonymous]
enabled = true

然后重启grafana服务

 

首先，打开grafana面板的页面，打开调式模式(F12),找到侧边框的标签，然后找到标签对应的className。

找到grafana的index.html页面（我的是二进制安装，路径是/usr/local/grafana/public/views/index.html）

在index.html 的最上面有很多css样式，在这里添加css样式

// 自定义设置
       .css-1k5or0q {
                display:none;
        }
       .css-1k9fskn{
               display:none;
        }
       .css-1vzus6i-Icon {
                display:none;
        }

       .css-679vub {
                display:none;
        }
       .css-gkkg4h {
        　　　　display:none;
        }

将侧边框对应的标签设置display:none即可。然后重启grafana。

其它的不需要的元素也可以使用同样的样式隐藏。

最后看下效果图

 

整个页面看起来是不是清爽了很多

终极效果展示