如何将Plotly折线图X轴固定为0:00-23:59时间范围？

要让X轴始终固定在0:00到23:59的范围，核心是让Plotly正确识别时间类型的X轴，再手动强制设置轴范围，具体修改如下：

步骤1：转换时间字段为时间类型 #

把time列从字符串转为标准时间类型，确保Plotly能正确解析时间维度：

# 替换原代码中data['time'] = data['time'].astype(str)这一行
data['time'] = pd.to_datetime(data['time'], format='%H:%M:%S').dt.time

步骤2：强制设置X轴固定范围 #

生成图表后，通过update_layout方法指定X轴的起始和结束时间：

fig = px.line(filtered_data, x='time', y=selected_measurement, title="监测指标趋势图", color='date')

# 导入datetime模块来构造时间范围
import datetime
fig.update_layout(
    xaxis=dict(
        range=[datetime.time(0,0,0), datetime.time(23,59,59)],
        tickformat="%H:%M"  # 可选，设置时间显示格式为小时:分钟
    )
)

修改后的完整代码 #

import pandas as pd
import streamlit as st
import plotly.express as px
import datetime

@st.cache_data
def load_data():
    data = pd.read_csv('2023.csv', usecols=['tower_id', 'pm2_5', 'humidity', 'temp', 'voc', 'pressure', 'date', 'time'])
    # 提前转换时间字段为时间类型
    data['time'] = pd.to_datetime(data['time'], format='%H:%M:%S').dt.time
    return data

data = load_data()

tower_ids = data['tower_id'].unique()

selected_measurement = st.selectbox('Select Measurement', ('pm2_5', 'humidity', 'temp', 'voc', 'pressure'))
selected_tower = st.selectbox('Which Tower would you want to select?', tower_ids)
dates = data['date'].unique()

filtered_data = data[(data['tower_id'] == selected_tower)]
selected_dates = st.multiselect('Select date(s)', dates)
filtered_data = filtered_data[filtered_data['date'].isin(selected_dates)]

fig = px.line(filtered_data, x='time', y=selected_measurement, title="监测指标趋势图", color='date')

# 固定X轴时间范围
fig.update_layout(
    xaxis=dict(
        range=[datetime.time(0,0,0), datetime.time(23,59,59)],
        tickformat="%H:%M"
    )
)

st.plotly_chart(fig, use_container_width=True)

额外说明 #

• 如果你的time列格式不是%H:%M:%S（比如只有%H:%M），需要调整pd.to_datetime的format参数匹配实际格式。
• 强制设置X轴范围后，即便部分日期缺少某些时间点的数据，X轴仍会保持0:00到23:59的完整范围，折线仅显示有数据的部分，符合需求效果。

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