Plotly Dash应用中最低与最高温度线间填充色异常的解决方法

问题分析 #

你当前的代码中两条曲线都设置了fill='tonexty'，导致填充逻辑混乱：

• 第一条（最低温曲线）没有前置trace，默认填充到y=0轴
• 第二条（最高温曲线）的tonexty本应填充到前一条曲线，但第一条的fill设置干扰了最终效果，导致依然出现从0开始的填充

正确实现方式 #

只需要给最高温度曲线设置fill='tonexty'，最低温度曲线不设置fill参数。tonexty的作用是填充当前曲线与前一条添加的曲线之间的区域，所以要确保最低温曲线先被添加到图表中。

修改后的代码 #

# Add filled area between min and max values
fig.add_scatter(
    x=daily_data_min_and_max['date'],
    y=daily_data_min_and_max['bearing_de_temperature_min_10m_c'],
    mode='lines',
    name='Min Temperature',
    hovertemplate='Date: %{x|%Y-%m-%d}<br>Min Bearing Temperature: %{y}',
    line=dict(shape='spline'),
    connectgaps=False,
)
fig.add_scatter(
    x=daily_data_min_and_max['date'],
    y=daily_data_min_and_max['bearing_de_temperature_max_10m_c'],
    fill='tonexty',  # 仅在此处设置填充，指向前一条的最低温曲线
    fillcolor='rgba(100, 200, 255, 0.3)',  # 自定义填充颜色及透明度，避免遮挡下方曲线
    mode='lines',
    name='Max Temperature',
    hovertemplate='Date: %{x|%Y-%m-%d}<br>Max Bearing Temperature: %{y}',
    line=dict(shape='spline'),
    connectgaps=False,
)

return fig
except Exception as e:
    print(f"Error updating graph: {str(e)}")
    traceback.print_exc()
    return dash.no_update

额外说明 #

• 如果需要调整填充区域的样式，可通过fillcolor设置RGBA颜色值，控制透明度（最后一位0-1），避免遮挡下方的100多条曲线
• 确保两条温度曲线的x轴数据完全对齐，否则填充区域会出现断层（connectgaps=False会保留数据间隙，若需要填充间隙可改为True）

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