引言
原生Grafana不能动态刷新面板中的图片,因此需要使用新的方案来实现。
原由
原生的Grafana能用于显示图片的面板为text
,可以在这个面板里面使用markdown或者html来访问图片链接,进而显示图片。但是面板里面的内容不会随着时间刷新,因此需要替代方案。
原理
主要要用到的就是Grafana中的一个插件,可以在这里找到。
这个插件其实和原生的text有点像,但是这个插件可以添加cs和js。其中的js有两种,一种是在页面刷新的时候执行一次,一种是在每次面板刷新(也就是右上角的刷新时间)的时候执行一次。同时js中还可以直接设置面板内html的内容。
因此整体的原理就是,使用html访问图片链接,然后在随着时间刷新的js中设置面板内html,这样每设置一次,就会访问一次图片链接,实现动态更新。
其中要注意的是,图片链接后面要加一个时间戳参数,这样可以避免浏览器缓存导致图片不会刷新。
实现
具体实现的话,就是在这个插件的面板里面,找到onHandleMetric
的js块,在里面可以写:1
htmlnode.innerHTML = '<img src="图片链接' + new Date().getTime() + '"/>'
如果要添加cs,可以在上面的cs块里面添加。