Plotly px.line绘制折线图时X轴比例显示不正确如何修复？

问题原因 #

你遇到的X轴间距异常是因为X轴字段被默认识别为离散类别型，所有类别默认等间距渲染，不会对应实际数值的间隔差异。

解决方案 #

1. 转换X轴字段的数据类型

首先确认epoch_time_ms字段不是字符串/object类型，将其转换为数值型或者时间类型：

import pandas as pd
# 方案A：转换为数值型
df['epoch_time_ms'] = pd.to_numeric(df['epoch_time_ms'])
# 方案B（更推荐）：转换为时间类型，X轴会自动适配时间刻度
df['epoch_time_ms'] = pd.to_datetime(df['epoch_time_ms'], unit='ms')

2. 手动指定X轴轴类型

如果类型转换后仍然异常，可在布局配置中强制指定X轴为线性轴/时间轴：

fig.update_layout(
    hovermode='x unified',
    # 数值型X轴用这个配置
    xaxis_type='linear'
    # 如果是上述方案B转换的时间类型X轴，用这个配置
    # xaxis_type='date'
)

修改后的完整代码示例 #

# 先做数据类型转换
df['epoch_time_ms'] = pd.to_datetime(df['epoch_time_ms'], unit='ms')

fig = px.line(df, x="epoch_time_ms", y="bacteria_count", line_shape="hv", markers=True, color='bacteria_type')
fig.update_traces(mode="markers+lines", hovertemplate=None)
fig.update_layout(
    hovermode='x unified',
    xaxis_type='date'
)

该方案兼容你使用的dash 2.0和plotly 5.3.1版本。

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