如何在Plotly Dash中配置关联时间下拉框的Sankey Diagram桑基图

核心逻辑说明 #

Plotly 桑基图的输入需要三类核心数据：

• 所有节点的标签列表label
• 流的源节点索引列表source
• 流的目标节点索引列表target
• 每条流的数值列表value
  你需要先把DataFrame中的数据转换为上述格式，再绑定到下拉框的回调中即可。

数据预处理（适配多列求和做源、多列做目标的需求） #

假设你的原始DataFrame包含字段：时间字段date，需要求和作为源的列营收A、营收B、营收C，作为目标的列成本、研发、营销、留存，参考处理代码如下：

# 1. 接收下拉框选中的时间值，过滤出对应时间的数据
filtered_df = df[df["date"] == selected_date]
# 2. 计算源的汇总值（如果不需要合并源，可跳过这步直接把各源列加入节点列表）
source_total = filtered_df[["营收A", "营收B", "营收C"]].sum().sum()
# 3. 构造节点标签列表：汇总源节点放前面，目标节点放后面
node_labels = ["总营收"] + ["成本", "研发", "营销", "留存"]
# 4. 构造流的三个核心列表
source = [0, 0, 0, 0] # 所有流的源都是索引为0的总营收节点
target = [1, 2, 3, 4] # 对应四个目标节点的索引
value = [
    filtered_df["成本"].iloc[0],
    filtered_df["研发"].iloc[0],
    filtered_df["营销"].iloc[0],
    filtered_df["留存"].iloc[0]
]

如果你的需求是多源节点对应多目标节点，直接把多个源列的名称加到node_labels的前半部分，修改source和value列表匹配对应索引和数值即可。

Dash回调绑定（关联时间下拉框） #

假设你的时间下拉框组件id为date_picker，桑基图容器id为sankey_chart，回调写法参考：

from dash import Dash, dcc, html, Input, Output
import plotly.graph_objects as go

app = Dash(__name__)
# 页面布局（你已经配置好下拉框，这里只做示例）
app.layout = html.Div([
    dcc.Dropdown(id="date_picker", options=df["date"].unique().tolist()),
    dcc.Graph(id="sankey_chart")
])

@app.callback(
    Output("sankey_chart", "figure"),
    Input("date_picker", "value")
)
def update_sankey(selected_date):
    # 把上面的数据预处理代码放到这里
    # 构造桑基图实例
    fig = go.Figure(data=[go.Sankey(
        node = dict(
            pad = 15,
            thickness = 20,
            line = dict(color = "black", width = 0.5),
            label = node_labels
        ),
        link = dict(
            source = source,
            target = target,
            value = value
        )
    )])
    fig.update_layout(title="资金流向桑基图", font_size=12)
    return fig

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

常见问题排查 #

• 如果选中的是时间段而非单天，把过滤后的DataFrame加.sum()做聚合即可，不需要取iloc[0]
• 节点索引必须从0开始连续计数，不能出现索引超过节点列表长度的情况
• 确保所有value的数值都是正数，否则会出现流不显示的问题

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