javascript - Grafana如何更改注释线粗细

Question

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

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

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

Answer 1

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

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

Answer 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。

改变：

@匹配http://127.0.0.1:3000/ *

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