Plotly技术实现：如何在时间轴上绘制离散时间戳

你的问题核心是原来的timeline方法生成的是基于时间范围的条形，当缩放视图时，时间范围对应的像素宽度会随x轴缩放而变化，导致线条变细或重叠。要实现固定像素宽度的离散线条，推荐使用Plotly的add_shape方法直接添加竖线，或者用Scatter绘制固定宽度的线条，两种方法都能保证线条宽度不受视图缩放影响。

方法一：使用add_shape添加固定宽度竖线 #

这种方法最直观，直接在图表上为每个时间戳添加竖线，线条宽度设为固定像素值，高度匹配对应y类别的条形高度。

步骤： #

1. 先获取y轴类别的位置映射（因为Plotly的分类y轴会将每个类别映射为一个数值索引）
2. 遍历每个时间戳，添加对应位置的竖线

import plotly.express as px
import plotly.graph_objects as go
from datetime import timedelta

# 保留你原有的初始化和timeline代码
passes, messages = init()
pass_fig = px.timeline(passes, x_start="begin", x_end='end', y='n')

# 1. 创建y轴类别到索引的映射
y_categories = passes['n'].unique()
y_map = {cat: idx for idx, cat in enumerate(y_categories)}

# 2. 遍历messages，为每个时间戳添加竖线
for _, row in messages.iterrows():
    # 获取当前n对应的y轴索引位置
    y_pos = y_map[row['n']]
    # 添加竖线：x0/x1为时间戳，y0/y1覆盖当前y类别的上下范围（匹配timeline条形高度）
    pass_fig.add_shape(
        type="line",
        x0=row["transmitted_at"],
        x1=row["transmitted_at"],
        y0=y_pos - 0.4,  # 0.4是为了让线条高度接近timeline的条形高度
        y1=y_pos + 0.4,
        line=dict(
            color="red",
            width=2,  # 固定像素宽度，不受缩放影响
        ),
        yref="y"  # 绑定到y轴的分类坐标
    )

# 显示图表
pass_fig.show()

方法二：使用Scatter绘制固定宽度线条 #

如果你更倾向于用trace的方式添加，可以用go.Scatter的mode='lines'来绘制竖线，线条宽度同样设为固定像素值。

# 延续之前的初始化代码
passes, messages = init()
pass_fig = px.timeline(passes, x_start="begin", x_end='end', y='n')

y_categories = passes['n'].unique()
y_map = {cat: idx for idx, cat in enumerate(y_categories)}

# 准备Scatter数据
scatter_traces = []
for n_val in messages['n'].unique():
    subset = messages[messages['n'] == n_val]
    y_pos = y_map[n_val]
    # 每个时间戳对应一条竖线：x重复两次（同一个时间戳），y是上下位置
    x_vals = []
    y_vals = []
    for ts in subset['transmitted_at']:
        x_vals.extend([ts, ts])
        y_vals.extend([y_pos - 0.4, y_pos + 0.4])
    scatter_traces.append(go.Scatter(
        x=x_vals,
        y=y_vals,
        mode='lines',
        line=dict(color='red', width=2),
        showlegend=False  # 不需要单独图例
    ))

# 添加所有Scatter trace到原图表
pass_fig.add_traces(scatter_traces)
pass_fig.show()

关键优势 #

• 两种方法的线条宽度都是固定像素值，无论怎么缩放x轴视图，线条宽度都不会改变
• 线条高度匹配timeline的条形高度，视觉上更协调
• 避免了时间戳重叠导致的视觉混乱，每个离散时间点都清晰可见

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