如何在Plotly Dash go.Scatter的X轴上跳过无数据日期？

需要展示以毫秒级时间为横轴的测量数据图，合并两次或多次间隔数分钟的测量数据后，Plotly会渲染完整时间轴，导致数据间出现大片空白区域。尝试将X轴类型设为category后，X轴仅显示一个时间戳，无法正常展示所有时间刻度。

当前代码及问题 #

当前代码：

def getCrackWidthDiagram(list1, list2, title, xaxis_title, yaxis_title):
    figure = go.Figure(data=[go.Scatter(
        x=list1, y=list2, marker_color="rgb(165,0,0)", mode='markers', marker_size=2)],)
    figure.update_layout(
        go.Layout(
            title=title,
            xaxis={
                "tickformat": ".6f",
            },
            xaxis_title=xaxis_title,
            yaxis_title=yaxis_title
        ),
        margin=dict(l=0, r=0, t=30, b=0),
    )
    figure.update_xaxes(
        tickformat="%H:%M:%S.%f\n%Y/%m/%d",  # 显示微秒格式
        dtick=60000, # 刻度间隔1分钟（毫秒为单位）
    )
    return figure

运行后图表存在数据间的空白区域，因为Plotly会填充两次测量之间的时间间隔。

尝试的代码及问题 #

将X轴类型设为category后，代码如下：

def getCrackWidthDiagram(list1, list2, title, xaxis_title, yaxis_title):
    figure = go.Figure(data=[go.Scatter(
        x=list1, y=list2, marker_color="rgb(165,0,0)", mode='markers', marker_size=2)],)
    figure.update_layout(
        go.Layout(
            title=title,
            xaxis={
                "tickformat": ".6f",
                "type":"category" # 添加的类型设置
            },
            xaxis_title=xaxis_title,
            yaxis_title=yaxis_title
        ),
        margin=dict(l=0, r=0, t=30, b=0),
    )
    figure.update_xaxes(
        tickformat="%H:%M:%S.%f\n%Y/%m/%d",  # 显示微秒格式
        dtick=60000, # 刻度间隔1分钟（毫秒为单位）
    )
    return figure

此设置导致X轴仅显示一个时间戳，无法正常展示所有数据的时间信息。

推荐使用Plotly的rangebreaks参数跳过空白时间段，既保留时间轴的连续性，又不显示无数据的间隔区域。具体修改如下：

def getCrackWidthDiagram(list1, list2, title, xaxis_title, yaxis_title):
    # 计算时间间隔，找出需要跳过的空白段（假设list1是datetime类型）
    import pandas as pd
    time_diffs = pd.Series(list1).diff().dropna()
    # 设置阈值为30秒（可根据实际测量间隔调整）
    break_starts = []
    break_ends = []
    for i, diff in enumerate(time_diffs):
        if diff.total_seconds() > 30:
            break_starts.append(list1[i])
            break_ends.append(list1[i+1])
    
    figure = go.Figure(data=[go.Scatter(
        x=list1, y=list2, marker_color="rgb(165,0,0)", mode='markers', marker_size=2)],)
    figure.update_layout(
        title=title,
        xaxis_title=xaxis_title,
        yaxis_title=yaxis_title,
        margin=dict(l=0, r=0, t=30, b=0),
    )
    figure.update_xaxes(
        tickformat="%H:%M:%S.%f\n%Y/%m/%d",
        dtick=60000,
        # 添加rangebreaks跳过空白时间段
        rangebreaks=[dict(bounds=[start, end]) for start, end in zip(break_starts, break_ends)]
    )
    return figure

关键说明 #

1. rangebreaks作用：通过指定需要跳过的时间区间，让Plotly不渲染空白区域，同时保留时间轴的时间类型特性，确保刻度格式正确。
2. 阈值自定义：代码中30秒的间隔阈值可根据实际需求调整，只要两次测量的间隔超过该值，就会被自动跳过。
3. 数据类型要求：确保list1中的元素是datetime类型（而非字符串或数值），这样才能正确计算时间差并设置rangebreaks。

如果已知固定的空白时间段，也可以直接手动指定跳过区间：

rangebreaks=[dict(bounds=["2024-05-20 10:05:00", "2024-05-20 10:10:00"])]

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