如何将Django数据库主键pk传递到内嵌Dash应用并查询数据绘图

解决方法 #

你使用initial_arguments传参的思路是对的，只是需要调整参数结构，配套Dash侧的隐藏存储组件接收参数，再通过回调查询ORM生成图表即可，具体修改如下：

1. 修改views.py参数结构 #

initial_arguments要求结构为{组件ID: {属性名: 初始值}}，调整你的视图函数：

def model(request, pk):
    context = {
        'dash_initial_args': {
            # 键对应后续Dash里隐藏组件的ID，值对应组件的属性与传入值
            'url_pk_store': {'data': pk}
        }
    }
    return render(request, 'model_results.html', context)

2. 调整模板传参配置 #

修改模板里的plotly_app标签，传入调整后的参数：

{%plotly_app name="tutorial_1" initial_arguments=dash_initial_args%}

3. 修改Dash应用代码 #

新增隐藏存储组件接收pk，加回调查询ORM生成图表：

from django_plotly_dash import DjangoDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# 导入你自己的Django模型，替换成你实际的应用名和模型名
from your_app_name.models import model_example

app = DjangoDash('tutorial_1')

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    # 新增隐藏存储组件，用来接收Django侧传的pk
    dcc.Store(id='url_pk_store'),
    # 移除原来固定的figure配置，改为回调动态生成
    dcc.Graph(id='example')
])

# 回调逻辑：拿到pk后查询ORM，生成图表返回
@app.callback(
    Output('example', 'figure'),
    Input('url_pk_store', 'data')
)
def build_graph_by_pk(pk):
    # 异常兜底
    if not pk:
        return {
            'data': [],
            'layout': {'title': '无有效主键参数'}
        }
    # 调用Django ORM查询数据
    try:
        doc_obj = model_example.objects.get(pk=pk)
    except model_example.DoesNotExist:
        return {
            'data': [],
            'layout': {'title': f'ID为{pk}的数据不存在'}
        }
    # 用查询到的doc_obj拼装你需要的图表数据，以下为示例
    return {
        'data': [
            {'x': [1, 2, 3, 4, 5], 'y': [doc_obj.field1, doc_obj.field2, doc_obj.field3, doc_obj.field4, doc_obj.field5], 'type': 'line', 'name': '自定义数据'},
        ],
        'layout': {
            'title': f'ID为{pk}的对象数据可视化'
        }
    }

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

注意事项 #

• 代码中your_app_name需要替换为你Django应用的实际名称
• 如果需要传递更多参数，只需要在视图的dash_initial_args里按照结构新增对应组件的属性即可
• 回调逻辑可以根据你的业务需求灵活调整，支持多输入输出、多图表联动等场景

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