grafana中的情节，避免情节和图例冲突

Question

我有一个 grafana 仪表板，可以让我概览家里的用电情况，包括电网和太阳能电池板产生的电量。其中一个图是一天的累计产量。我最初将其制作为 grafana 时间序列图。在时间序列图上，不可能将 x 轴固定在某个时间间隔内，因此当图在一天中在面板上滑动时，我不得不给它大量的空气。所以我使用 grafana 的plotly 重新创建了情节。这很有效，但我对图例的显示方式有一些问题。图中左上角是时间序列面板，下面是情节面板：（今天面板上云层很厚，甚至还有些雪，所以产量不多）

这还不错，但我想让绘图面板与当前时间序列面板的大小相同，如果我这样做，它会变得混乱：

是否可以使图例上的线条更短，以便它仍然可以适合相同的垂直尺寸（最好），或者我可以以某种方式使图形区域自动缩小以为图例提供空间吗？

如果有帮助的话，从postgresql数据库查询数据，时间字段是测量的时间戳，ppv_total是瞬时发电量。当我每 5 分钟获得一个数据点时，我除以 12 以获得 kWh 估计值， now()::date+time::time 是将所有最后几天的测量移到今天的时间范围内。

select to_char(time::date,'YYYY-mm-dd') as parameter, now()::date+time::time as time,
sum(ppv_total/12) over (partition by time::date order by time) as " "
from pv where pv.time > now()::date - interval '7 days'
order by time;

此查询的结果随后在 grafana 中作为时间序列处理，基本上是创建一个数据透视表，将“参数”中的值作为新的列标题。该表的一个片段如下所示：

然后通过此脚本运行（“数据”是来自 grafana 的输入）。

let dataset = []
for (set =1; set<9; set++){
  let x = [];
  let y = [];
  data.series[0].fields[set].values.forEach(function (item, index) {
    if (item > ''){ // must get rid of empty values
        y.push(item/1000); // I want kWh, having production in Watt
        x.push(data.series[0].fields[0].values[index]);
    }
  }); 
  if (set == 8){ // Todays line should stand out
    line={width:4,
    color: "yellow"};
  }else{
    line={width:1};
  }
  let serie = {
  x : x,
  y : y,
  name : data.series[0].fields[set].labels.parameter,
  line: line
  };
  dataset.push(serie)
}
return {
  data : dataset,
  config : {
    displayModeBar: false
  }
}

grafana中定义的布局对象是：

{
  "yaxis": {
    "gridcolor": "#344",
    "autorange": true,
    "color": "#444",
    "type": "linear",
    "range": [
      -0.3900152777777779,
      7.49179027777778
    ]
  },
  "xaxis": {
    "type": "date",
    "gridwidth": 1,
    "gridcolor": "#444",
    "autorange": true,
    "color": "#444",
    "range": [
      "2024-03-26 07:49:19",
      "2024-03-26 19:40:08"
    ]
  },
  "annotations": [
    {
      "showarrow": false,
      "text": "kWh",
      "textangle": -90,
      "x": -0.03,
      "xanchor": "right",
      "xref": "paper",
      "y": 0.5,
      "yanchor": "right",
      "yref": "paper"
    }
  ],
  "font": {
    "color": "darkgrey"
  },
  "hovermode": "closest",
  "margin": {
    "b": 10,
    "t": 15,
    "r": 10,
    "l": 40
  },
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0)",
  "legend": {
    "orientation": "h",
    "yanchor": "bottom",
    "y": -0.5,
    "xanchor": "mid",
    "x": 0,
    "entrywidth": 20
  }
}

Answer 1

• 是否可以缩短图例上的线条，使其仍然适合相同的垂直尺寸？

  不，事实上我们可以设置图例的

  itemwidth

  ，但默认值已经是最小值了:

  itemwidth

  - 大于或等于 30 的数字。 设置图例项目符号（除 标题.文本）。

---

• 或者我可以以某种方式使图形区域自动缩小以为图例留出空间吗？

  是的，通过调整布局：

  • 底部边距设置图例的空间，但 grafana 设置 (10) 太小，请增加该值并确保启用布局边距'

    autoexpand

    。
  • 将图例

    entrywidth

    设置为 0 以根据文本宽度调整条目大小。
  • 将图例

    yanchor

    设置为“中间”而不是“底部”，以便自动扩展功能正常工作。