如何在Dash生成的Plotly图表中显示当前查询使用的数据库名称

实现方案建议 #

两种实现方式都可行，你可以根据自己的需求选择：

方案1：修改go.Layout配置

适合需要导出图表时也自带数据源标识的场景，数据库名称会和图表绑定为一体：
你可以在生成图表的函数里，通过布局配置的annotations属性，把数据库名称放在你需要的右上角位置，示例代码如下：

import plotly.graph_objects as go

# 回调中获取选中的数据库名称，假设你拿到的变量为selected_db
selected_db = "你选中的数据库名"
fig = go.Figure(
    data=[], # 替换为你的实际图表数据
    layout=go.Layout(
        title="图表主标题",
        # 右上角添加数据源标识
        annotations=[
            dict(
                x=1, y=1.05,
                xref="paper", yref="paper",
                text=f"数据源：{selected_db}",
                showarrow=False,
                font=dict(size=12, color="#666")
            )
        ]
    )
)

如果觉得加注释麻烦，也可以直接把数据库名称拼接在图表主标题里。

方案2：修改Dash HTML布局

适合仅页面展示、后续可能要调整标识样式的场景，不需要修改图表本身的配置：
首先调整你的content区域结构，在图表容器上方新增一个展示数据源的容器：

content = html.Div(
    [
        # 新增数据源标识容器
        html.Div(
            id="db_source_label",
            style={"textAlign": "right", "marginBottom": "8px", "color": "#666", "fontSize": "14px"}
        ),
        # 原有图表容器保持不变
        html.Div(id="barchart7"),
        html.Div(id="pie7")
    ],
    style=constants.CONTENT_STYLE # 沿用你原来的content样式
)

然后修改生成图表的回调，新增一个输出把数据库名称传入标识容器即可：

@app.callback(
    [Output("barchart7", "children"), Output("db_source_label", "children")],
    [Input("submit_button", "n_clicks")],
    [State(constants.database.id, "value")] # 读取数据库选择控件的选中值
)
def update_chart(n_clicks, selected_db):
    # 原有生成图表的逻辑不变
    fig = 你的图表生成函数(selected_db)
    return dcc.Graph(figure=fig), f"数据源：{selected_db}"

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