Plotly折线图多年份线条重叠问题求助

问题原因 #

折线图线条重叠的核心原因是X轴使用的month为1-12的重复值，不同年份的同月份数据在X轴上的坐标完全一致，导致多条折线重合在一起。

解决方案 #

1. 使用完整日期作为X轴（推荐方案）

将year和month合并为完整的日期字段，让X轴成为连续的时间序列，不同年份的同月份数据会按时间顺序排列，既不会重叠，还能直观展示数据的时间趋势：

@app.callback(
    Output('our_graph','figure'),
    [Input('product','value'),
     Input('type','value'),
     Input('category','value')])
def build_graph(first, second, third):
    dff=df[(df['product']==first)&
           (df['type']==second)&
           (df['category']==third)]
    # 合并year和month为datetime类型的日期列
    dff['date'] = pd.to_datetime(dff['year'].astype(str) + '-' + dff['month'].astype(str), format='%Y-%m')
    # 使用date作为X轴
    fig = px.line(dff, x="date", y="sum", color="year",height=600)
    # 设置X轴显示格式为年份-月份
    fig.update_xaxes(tickformat="%Y-%m")
    fig.update_layout(
                    xaxis=dict(tickmode='linear'),
                    yaxis={'title':'Amount'},
                    title={'text':'Product Analysis',
                           'font':{'size':28},'x':0.5,'xanchor':'center'})
    return fig

2. 按年份分面展示

如果需要实现类似Excel的同月份横向对比效果，可以用分面功能将每个年份的折线放在独立子图中，避免线条重叠：

@app.callback(
    Output('our_graph','figure'),
    [Input('product','value'),
     Input('type','value'),
     Input('category','value')])
def build_graph(first, second, third):
    dff=df[(df['product']==first)&
           (df['type']==second)&
           (df['category']==third)]
    # 使用facet_col按年份拆分子图
    fig = px.line(dff, x="month", y="sum", color="year", height=600, facet_col="year")
    fig.update_layout(
                    xaxis=dict(tickmode='linear'),
                    yaxis={'title':'Amount'},
                    title={'text':'Product Analysis',
                           'font':{'size':28},'x':0.5,'xanchor':'center'},
                    facet_col_wrap=1  # 纵向排列子图，可根据需求改为横向
                    )
    # 统一所有子图的Y轴范围，方便对比
    fig.update_yaxes(matches='y')
    return fig

3. 为不同年份的X轴添加偏移（备选方案）

如果一定要保留1-12的月份作为X轴，可以给不同年份的month值添加微小偏移，让线条错开显示：

@app.callback(
    Output('our_graph','figure'),
    [Input('product','value'),
     Input('type','value'),
     Input('category','value')])
def build_graph(first, second, third):
    dff=df[(df['product']==first)&
           (df['type']==second)&
           (df['category']==third)]
    # 为每个年份设置偏移量（根据你的实际年份调整）
    year_offset = {2021: 0, 2022: 0.1, 2023: 0.2}
    dff['month_offset'] = dff.apply(lambda row: row['month'] + year_offset[row['year']], axis=1)
    # 使用偏移后的month_offset作为X轴
    fig = px.line(dff, x="month_offset", y="sum", color="year", height=600)
    # 重置X轴刻度为1-12，隐藏偏移后的数值
    fig.update_xaxes(tickvals=range(1,13), ticktext=[str(i) for i in range(1,13)])
    fig.update_layout(
                    yaxis={'title':'Amount'},
                    title={'text':'Product Analysis',
                           'font':{'size':28},'x':0.5,'xanchor':'center'})
    return fig

注意事项 #

• 确保year和month字段为数值类型，避免合并日期时出现格式错误；
• 分面方案中，通过matches='y'统一子图Y轴范围，能让同月份的数值对比更直观；
• 偏移方案的偏移量不宜过大，避免X轴刻度显示混乱。

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