如何让Grafana中两个InfluxDB查询的图表X轴完美对齐？

一、Grafana环境下的处理方法 #

1. 修复两个独立图表的时间轴错位 #

• 强制时间范围同步：进入仪表板设置（Dashboard Settings）→ Time Options，勾选Sync time across panels，确保两个图表的时间区间完全一致。
• 统一Y轴标签宽度：编辑底部图表，在Axes配置中找到Y轴的Label Width，手动设置固定像素值（如120px），和顶部图表的Y轴标签宽度保持相同，消除因标签长度差异导致的X轴偏移。
• 优化Y轴显示：若底部Y轴标签过长，可在标签文本中插入<br>实现换行，或隐藏次要刻度、缩小标签字体，减少空间占用。

2. 创建共享X轴的单面板子图 #

• 多查询+拆分面板：
  1. 添加一个Time Series面板，在Queries标签下添加两组InfluxDB查询，分别对应你的两组数据。
  2. 切换到Transform标签，添加Organize Fields转换，将两组数据的字段分配到不同的组。
  3. 开启Split Panels选项，选择按Rows拆分，即可生成上下排列、自动共享X轴的两个子图，时间轴完全对齐。
• 多Y轴同面板（若不需要上下分离）：在Axes标签中开启Multiple Y-axes，为第二组数据分配独立Y轴（左/右），两组数据共用同一X轴，也能实现关联观察。

二、Python绘图（Matplotlib）场景 #

如果是用Python处理查询结果并绘图，直接创建共享X轴的子图即可：

import matplotlib.pyplot as plt
import pandas as pd

# 假设df1、df2是从InfluxDB获取的时序数据，包含timestamp和value列
fig, (ax_top, ax_bottom) = plt.subplots(2, 1, sharex=True, figsize=(10, 7))

# 绘制顶部图表
ax_top.plot(df1['timestamp'], df1['value'], color='#1f77b4')
ax_top.set_ylabel('顶部数据Y轴')

# 绘制底部图表
ax_bottom.plot(df2['timestamp'], df2['value'], color='#ff7f0e')
ax_bottom.set_ylabel('底部数据Y轴')
ax_bottom.set_xlabel('时间戳')

# 自动调整布局，避免标签重叠
plt.tight_layout()
plt.show()

这种方式下两个子图的X轴完全共享，无需手动调整对齐。

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