如何在满足条件时显示提示消息替代Dash Graph组件渲染的图表

这里提供两种实现思路，可根据你的项目实际情况选择：

方案1：调整回调输出，直接切换渲染内容（推荐） #

无需处理图表空白样式，交互更友好，仅需调整两处代码：

• 首先给包裹Graph的Div新增id，修改组件定义：

# 新增id为graph-container
html.Div(id="graph-container", children=[dcc.Graph(id="graph-figure")])

• 调整回调输出对象，在判断分支返回对应内容：

import plotly.express as px
from dash import html, dcc

# 输出改为绑定container的children属性
@app.callback(
Output("graph-container", "children"),
Input("dropdown_a", "value"),
Input("dropdown_x", "value"),
Input("dropdown_y", "value"))
def update_graph(a, x_axis, y_axis):
    df = pd.read_csv(r"C:\Users\user\project\Data.csv")
    # 取值相等时返回提示文本
    if x_axis == y_axis:
         return html.P(
             "X轴与Y轴不能选择相同字段，请重新选择",
             style={"color": "#dc3545", "padding": "3rem", "textAlign": "center"}
         )
    # 正常情况返回图表组件
    return dcc.Graph(figure=px.bar(df, x=x_axis, y=y_axis))

方案2：无需修改现有组件结构，直接返回带提示的空图表 #

如果不想调整现有组件层级，可直接在判断分支返回带有自定义注释的空白图表：

import plotly.express as px
import plotly.graph_objects as go

@app.callback(
Output("graph-figure", "figure"),
Input("dropdown_a", "value"),
Input("dropdown_x", "value"),
Input("dropdown_y", "value"))
def update_graph(a, x_axis, y_axis):
    df = pd.read_csv(r"C:\Users\user\project\Data.csv")
    if x_axis == y_axis:
         # 构造仅显示提示文本的空白图表
         return go.Figure(
             layout=dict(
                 xaxis={"visible": False},
                 yaxis={"visible": False},
                 annotations=[
                     dict(
                         text="X轴与Y轴不能选择相同字段，请重新选择",
                         xref="paper",
                         yref="paper",
                         showarrow=False,
                         font=dict(size=16, color="#dc3545")
                     )
                 ]
             )
         )
    return px.bar(df, x=x_axis, y=y_axis)

两种方案均无需额外引入依赖，可直接适配你现有的代码逻辑

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