Grafana如何改变注释线的粗细

Question

有没有option/workaround改变Grafana的注释线粗细？

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

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

Answer 1

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

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

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 在这方面。

变化：

@match http://127.0.0.1:3000/*

到你自己的地址让它工作，不要忘记打开脚本和 Greasemonkey。

Grafana如何改变注释线的粗细

Grafana how to change annotation line thickness

javascript

annotations

line

thickness

grafana