如何避免Dash应用中勾选/取消勾选选项时折线颜色变化

问题根源是Plotly Express默认会根据当前筛选后的类别动态分配颜色，导致勾选/取消勾选时颜色重新分配。要让每个cluster对应固定颜色，只需提前为所有cluster分配专属颜色，并在绘图时指定颜色映射。

具体步骤： #

1. 创建固定颜色映射字典：在获取cluster_list后，为每个cluster绑定一个固定颜色（可使用Plotly内置的定性色阶，或自定义颜色）。
2. 绘图时指定颜色映射：调用px.line时，通过color_discrete_map参数传入颜色映射字典。

修改后的关键代码： #

首先在获取cluster_list的代码后添加颜色映射：

cluster_list = pd.DataFrame(
    cursor.execute(
        f"SELECT DISTINCT cluster FROM {CATALOG_NAME}.{DB_NAME}.{TABLE_NAME} WHERE cluster NOT IN ('dev', 'tst')"
    ).fetchall()
)[0].to_list()

# 为每个cluster分配固定颜色，使用Plotly D3定性色阶（也可替换为自定义颜色列表）
color_map = {cluster: color for cluster, color in zip(cluster_list, px.colors.qualitative.D3)}

然后更新回调函数中的绘图代码：

@callback(Output("uptime-line-figure", "figure"), Input("cluster-checklist", "value"))
def update_figure(selected_clusters):
    df_filtered = df[df["cluster"].isin(selected_clusters)]

    # 传入color_discrete_map固定颜色
    fig = px.line(
        df_filtered, 
        x="date", 
        y="up_pct", 
        color="cluster", 
        title="Uptime",
        color_discrete_map=color_map
    )

    return fig

说明： #

• 如果你想自定义颜色，只需把px.colors.qualitative.D3替换为自己的颜色列表，比如["#FF5733", "#33FF57", "#3357FF"]。
• 颜色映射字典包含所有cluster的颜色，即使部分cluster未被选中，后续再次选中时仍会使用原来的颜色。

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