如何在Streamlit中使用Plotly根据条件为两条折线图之间的区域填充不同颜色

嘿，我来帮你搞定这个问题！要实现根据col1和col2的高低关系填充不同颜色，我们可以利用Plotly的填充功能，结合numpy来筛选出符合条件的数据区间，把不符合的部分设为NaN，这样就能分别显示绿色和红色的填充区域了。

解决方案思路 #

核心思路是把两种条件的填充区域拆分成两个独立的Plotly trace：

• 当col1 > col2时，用绿色填充col1和col2之间的区域
• 当col1 < col2时，用红色填充col1和col2之间的区域

我们需要先把数据转换成numpy数组，方便做条件判断，然后用np.where生成只保留符合条件的数据的数组，不符合的位置设为NaN，这样填充就只会在有效区域显示。

修改后的完整代码 #

import streamlit as st
import plotly.graph_objects as go
import numpy as np
import pandas as pd

def DisplayPlot(df):
    # 先按月份排序，保证图表x轴顺序正确（可选，但建议做）
    month_order = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    df['month'] = pd.Categorical(df['month'], categories=month_order, ordered=True)
    df = df.sort_values('month')
    
    # 提取数据并转为numpy数组
    month = df['month'].tolist()
    col1 = df['col1'].to_numpy()
    col2 = df['col2'].to_numpy()
    col3 = df['col3'].tolist()

    fig = go.Figure()  # 初始化图表对象，原代码遗漏了这一步哦

    # 添加两条基础折线
    fig.add_trace(go.Scatter(x=month, y=col1, name='col1', line=dict(color='blue', width=4)))
    fig.add_trace(go.Scatter(x=month, y=col2, name='col2', line=dict(color='red', width=2)))
    fig.add_trace(go.Scatter(x=month, y=col3, name='col3', mode='lines', line=dict(color='#CDCDCD', width=2, dash='dot')))

    # --- 新增：条件填充区域 ---
    # 1. col1 > col2时，填充绿色（从col2到col1）
    fig.add_trace(go.Scatter(
        x=month,
        y=np.where(col1 > col2, col1, np.nan),  # 只保留col1>col2的部分，其余为NaN
        fill='tonexty',  # 填充到前一个trace（也就是col2）
        fillcolor='rgba(0,255,0,0.3)',  # 半透明绿色
        line=dict(color='rgba(0,0,0,0)'),  # 隐藏这条trace的线条
        name='col1 > col2'
    ))

    # 2. col1 < col2时，填充红色（从col1到col2）
    fig.add_trace(go.Scatter(
        x=month,
        y=np.where(col1 < col2, col2, np.nan),  # 只保留col1<col2的部分，其余为NaN
        fill='tonexty',  # 填充到前一个trace（也就是col1）
        fillcolor='rgba(255,0,0,0.3)',  # 半透明红色
        line=dict(color='rgba(0,0,0,0)'),  # 隐藏这条trace的线条
        name='col1 < col2'
    ))

    # 编辑布局
    fig.update_layout(
        title=dict(text='Title'),
        xaxis=dict(title=dict(text='Month')),
        yaxis=dict(title=dict(text='Taux')),
    )
    st.plotly_chart(fig)

# 测试用的数据集（对应你提供的表格）
data = {
    'month': ['Jan', 'Feb', 'Apr', 'Mar', 'May'],
    'col1': [0.1555, 0.1097, 0.1459, 0.2804, 0.267],
    'col2': [0.1256, 0.119, 0.175, 0.2634, 0.1855],
    'col3': [0.1863, 0.1863, 0.1863, 0.1863, 0.1863]
}
df = pd.DataFrame(data)
DisplayPlot(df)

代码关键说明 #

1. 月份排序：我加了月份排序的代码，因为你的原始数据集里月份顺序是乱的（Jan→Feb→Apr→Mar），排序后图表的x轴会按正常月份顺序显示，更直观。
2. numpy条件筛选：用np.where判断col1和col2的大小关系，只保留符合条件的数值，不符合的设为np.nan，这样填充区域只会在有效区间显示。
3. 填充设置：fill='tonexty'表示填充当前trace和前一个trace之间的区域，配合透明的线条（line=dict(color='rgba(0,0,0,0)')），不会额外显示多余的折线。
4. 透明度设置：fillcolor用了带透明度的RGBA值，这样填充区域不会遮挡下方的折线，视觉效果更好。

效果说明 #

用你的测试数据运行后：

• Jan、Mar、May这几个月份，col1高于col2，对应的区域会显示半透明绿色
• Feb、Apr这两个月份，col1低于col2，对应的区域会显示半透明红色

备注：内容来源于stack exchange，提问作者innov-aphp