Grafana柱状图配置求助：按小时展示两类延迟数据

一、确认SQL查询结果格式 #

你的SQL执行后应返回如下结构的结果（每一行对应一个小时，列对应A、B两类的平均延迟）：

若查询结果符合上述格式，接下来调整Grafana面板配置即可。

二、Grafana柱状图核心配置步骤 #

1. 基础查询验证
   确保选中正确数据源，将SQL粘贴到查询编辑器执行，确认返回结果结构无误。

2. 可视化面板设置

   • 选择「Bar chart」作为可视化类型。
   • X轴配置：在「Axes」选项卡中，X轴「Mode」选「Categories」，「Field」下拉框选择Hour字段。
   • 柱状条分组设置：在「Panel options」里，将「Bar grouping」设为「Grouped」（分组模式），不要选「Stacked」（堆叠模式），这样每个小时下的A、B柱状条会并排显示。
   • 数据格式匹配：「Data formatting」部分的「Series」设置为「Columns」，让查询结果的每一列对应一个类别（A/B）的系列数据。

3. SQL列名优化（可选）
   原SQL中PIVOT生成的列名带引号，显示不够友好，可修改SQL给列加别名：

   select * from (
     select extract(hour from event_datetime) Hour, category, (source_timedelta_s_ + pipeline_timedelta_s_) Latency from <table>
     where extract(date from event_datetime) = '2022-12-13' and extract(hour from event_datetime) > 12
   )
   PIVOT (
      avg(Latency)
      FOR category IN ('A' AS A, 'B' AS B)
   ) t
   order by t.Hour
   

   修改后返回的列名是A和B，在Grafana中显示更清晰。

4. 补全缺失小时（可选）
   若某些小时无数据，查询结果会缺失对应行，导致X轴小时不连续。以PostgreSQL为例，可通过生成连续小时的子查询左连接补全：

   WITH hours AS (
     SELECT generate_series(13, 23) AS Hour
   )
   SELECT h.Hour, COALESCE(t.A, 0) AS A, COALESCE(t.B, 0) AS B
   FROM hours h
   LEFT JOIN (
     -- 插入你修改后的PIVOT查询
     select * from (
       select extract(hour from event_datetime) Hour, category, (source_timedelta_s_ + pipeline_timedelta_s_) Latency from <table>
       where extract(date from event_datetime) = '2022-12-13' and extract(hour from event_datetime) > 12
     )
     PIVOT (
        avg(Latency)
        FOR category IN ('A' AS A, 'B' AS B)
     ) t
   ) t ON h.Hour = t.Hour
   ORDER BY h.Hour
   

   这样无数据的小时会显示0值，保证X轴小时连续。

三、常见问题排查 #

• 若柱状条仍未分组，检查「Field」设置是否将Hour设为类别字段，A、B设为值字段。
• 确认查询结果中每个Hour只有一行数据，避免重复小时行导致柱状条重叠。

内容的提问来源于stack exchange，提问作者Zuffido