Grafana如何更改注释线粗细

Posted 2023-02-16

【中文标题】Grafana如何更改注释线粗细

【英文标题】：Grafana how to change annotation line thickness

【发布时间】：2020-03-03 14:09:59

【问题描述】：

是否有任何选项/解决方法可以更改 Grafana 的注释线粗细？

注释的线很细，几乎看不到。

如果可以将线条样式从虚线更改为实线，也会更加明显。

【参考方案1】：

您不能增加注释线的粗细。

但是，如果看不清楚，请尝试区域标注。您可以按住 Ctrl/Cmd 并选择区域来创建区域标注。

【讨论】：

我已经使用 Greasemonkey 插件更改了 CSS，让它看起来像我想要的那样。感谢分享另一种方法。

【参考方案2】：

我没有找到任何方法在 Grafana 中更改它，但我编写了 Greasemonkey 脚本来完成工作，我现在的注释行是 5px 粗而不是 1px：

// ==UserScript==
// @name     Grafana
// @version  1
// @grant    none
// @match http://127.0.0.1:3000/*
// ==/UserScript==

setInterval(function() 

  // change the line thickness
  var annotationLineElArr = document.querySelectorAll('div.graph-panel div.events_line');
  for (i=0;i<annotationLineElArr.length;i++) 
    var annotationLineEl = annotationLineElArr[i];
    annotationLineEl.style.borderLeftWidth = '5px';
  
  
  // change the bottom marker size
  var annotationMarkerElArr = document.querySelectorAll('div.graph-panel div.events_marker');
  for (i=0;i<annotationMarkerElArr.length;i++) 
    var annotationMarkerEl = annotationMarkerElArr[i];
    annotationMarkerEl.style.borderWidth = 'medium 10px 12px'
    annotationMarkerEl.style.left = '-12px'
  
  
, 1000/1);

之前：

之后

因为我将垂直线加厚了 4px，所以它可能应该向左移动 2px 以正好位于它所代表的时间戳的中间，但我不太关心它，所以我没有在这方面更改 CSS .

改变：

@match http://127.0.0.1:3000/*

到您自己的地址以使其正常工作，不要忘记打开脚本和 Greasemonkey。