Plotly折线填充异常修复：实现多线间填充、单线不填充至零轴

你的问题核心在于静态Plotly图表无法根据图例切换动态调整填充逻辑——当前代码固定让Low折线填充到High折线，一旦High或Low被隐藏，填充行为就会不符合预期。要实现你需要的动态填充效果，我们可以用Dash添加交互回调，根据可见的折线数量和组合自动调整填充规则。

完整解决方案代码 #

import dash
from dash import dcc, html, Input, Output, State
import plotly.graph_objects as go
import pandas as pd

# 假设你的DataFrame已经准备好，这里用示例数据模拟
# df = pd.read_csv('your_data.csv')
# 以下为示例数据，实际替换为你的数据
df = pd.DataFrame({
    'date': pd.date_range(start='2023-01-01', periods=30),
    'aHigh': [100 + i + pd.np.random.randint(-5,5) for i in range(30)],
    'aLow': [80 + i + pd.np.random.randint(-5,5) for i in range(30)],
    'a': [90 + i + pd.np.random.randint(-5,5) for i in range(30)]
})

def create_initial_figure(df):
    HIGH = "rgb(255,0,0)"
    LOW = "rgb(0,0,255)"
    MIDDLE = "rgb(0,255,0)"
    FILL_COLOR = "rgba(255, 172, 167, 0.2)"

    maxRange = df.aHigh.max()
    minRange = df.aLow[df.aLow>0].min()
    extraRange = 0.05 * (maxRange - minRange)

    fig = go.Figure()
    # 添加三条折线，初始时High和Low之间有填充
    fig.add_trace(go.Scatter(
        x=df.date, y=df.aHigh, mode='lines', 
        name='High', line_color=HIGH, fill=None
    ))
    fig.add_trace(go.Scatter(
        x=df.date, y=df.aLow, mode='lines', 
        name='Low', line_color=LOW, fill='tonexty', fillcolor=FILL_COLOR
    ))
    fig.add_trace(go.Scatter(
        x=df.date, y=df.a, mode='lines', 
        name='Middle', line_color=MIDDLE, fill=None
    ))

    fig.update_layout(
        title = "Ticker", 
        xaxis_title = 'Date', 
        yaxis_title = 'Price', 
        yaxis_range = [minRange - extraRange, maxRange + extraRange]
    )
    fig.update_yaxes(fixedrange=False)
    return fig

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='price-chart', figure=create_initial_figure(df)),
    # 存储当前可见的折线状态
    dcc.Store(id='visible-traces', data=[True, True, True])
])

# 回调：根据可见折线更新填充规则
@app.callback(
    Output('price-chart', 'figure'),
    Input('visible-traces', 'data'),
    State('price-chart', 'figure'),
    prevent_initial_call=False
)
def update_fill(visible, fig):
    # 重置所有填充
    for trace in fig['data']:
        trace['fill'] = None
        trace['fillcolor'] = None
    
    # 获取可见折线的索引
    visible_indices = [i for i, is_visible in enumerate(visible) if is_visible]
    fill_color = "rgba(255, 172, 167, 0.2)"

    if len(visible_indices) == 2:
        # 两条折线时，填充它们之间的区域
        idx1, idx2 = sorted(visible_indices)
        fig['data'][idx2]['fill'] = 'tonexty'
        fig['data'][idx2]['fillcolor'] = fill_color
    elif len(visible_indices) == 3:
        # 三条折线时，填充High和Low之间的区域
        fig['data'][1]['fill'] = 'tonexty'
        fig['data'][1]['fillcolor'] = fill_color
    
    return fig

# 回调：跟踪图例切换时的折线可见状态
@app.callback(
    Output('visible-traces', 'data'),
    Input('price-chart', 'restyleData'),
    State('visible-traces', 'data'),
    prevent_initial_call=True
)
def update_visible_state(restyle_data, current_visible):
    if not restyle_data:
        return current_visible
    # 提取图例切换的信息
    props, trace_indices = restyle_data
    if 'visible' in props:
        for idx in trace_indices:
            current_visible[idx] = props['visible']
    return current_visible

if __name__ == '__main__':
    app.run_server(debug=True)

代码说明 #

1. 初始图表创建：和你的原代码逻辑一致，初始时High和Low之间有填充。
2. 可见状态存储：用dcc.Store保存三条折线的可见状态（初始都为可见）。
3. 填充更新回调：
   • 当只有一条折线可见时，清空所有填充。
   • 当两条折线可见时，填充它们之间的区域。
   • 当三条折线可见时，恢复High和Low之间的填充。
4. 图例切换跟踪：监听图例点击事件，更新折线的可见状态。

静态图表替代方案 #

如果不需要交互（仅静态图表），无法实现图例切换时自动调整填充。此时可以预先创建多个版本的图表，或者为每对折线添加单独的填充层并手动控制可见性，但这种方式灵活性较差。

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