将 Plotly Dash 嵌入 Flask 应用程序

Posted 2023-03-04

【中文标题】将 Plotly Dash 嵌入 Flask 应用程序

【英文标题】：Embed Plotly Dash into Flask Application

【发布时间】：2020-09-04 06:12:34

【问题描述】：

我已经成功创建了我的第一个 Flask 应用程序，并将我的代码划分为一系列蓝图，因为我的代码库会随着时间的推移而大幅增长。我现在正在尝试将一个情节仪表板（或者可能只是一个情节视觉显示）嵌入到我的应用程序中。

目前，我正在使用从网络上获取的玩具示例来进行情节学习。第二个代码块启动破折号，但我的目标是将第二个代码集成到我的主烧瓶应用程序中。暂时，我希望它成为主应用程序中的一条路线（稍后我会将其解析为蓝图模块），但无法从情节文档中找到说明如何将它们集成在一起的教学示例。

我正在寻找一些代码支持，他们可能能够展示如何将第二个作为路由无缝集成到主应用程序中。

这个链接给了我一些尝试的想法，Running a Dash app within a Flask app，但我对那里提出的一些想法不太成功。

from flask import Flask, render_template, request, session
from flask_session import Session

app = Flask(__name__)
app.secret_key = 'abcdefg'

### Import and Register Blueprints 
from Help.routes import help
from Datatools.routes import data_tools
from Configtools.routes import config_tools
from wordAnalyzer.routes import word_analyzer
from ScoringTools.routes import test_scoring

app.register_blueprint(help)
app.register_blueprint(data_tools)
app.register_blueprint(config_tools)
app.register_blueprint(word_analyzer)
app.register_blueprint(test_scoring)

@app.route('/')
def homepage():
    return render_template('index.html')   

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

情节应用

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

df = pd.read_excel("https://github.com/chris1610/pbpython/blob/master/data/salesfunnel.xlsx?raw=True")
pv = pd.pivot_table(df, index=['Name'], columns=["Status"], values=['Quantity'], aggfunc=sum, fill_value=0)

trace1 = go.Bar(x=pv.index, y=pv[('Quantity', 'declined')], name='Declined')
trace2 = go.Bar(x=pv.index, y=pv[('Quantity', 'pending')], name='Pending')
trace3 = go.Bar(x=pv.index, y=pv[('Quantity', 'presented')], name='Presented')
trace4 = go.Bar(x=pv.index, y=pv[('Quantity', 'won')], name='Won')

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Sales Funnel Report'),
    html.Div(children='''National Sales Funnel Report.'''),
    dcc.Graph(
        id='example-graph',
        figure=
            'data': [trace1, trace2, trace3, trace4],
            'layout':
            go.Layout(title='Order Status by Customer', barmode='stack')
        )
])

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

更新

我想知道是否可以按照以下方式执行某些操作，以便生成视觉显示并将其输出到我创建的 html 文件中。我的想法是我的应用程序现在设置为允许自定义文件输入，然后用户可以读取数据文件并将其传递给图形。

@server.route('/fake')
def fake():
    df = pd.read_excel("https://github.com/chris1610/pbpython/blob/master/data/salesfunnel.xlsx?raw=True")
    pv = pd.pivot_table(df, index=['Name'], columns=["Status"], values=['Quantity'], aggfunc=sum, fill_value=0)
    trace1 = go.Bar(x=pv.index, y=pv[('Quantity', 'declined')], name='Declined')
    trace2 = go.Bar(x=pv.index, y=pv[('Quantity', 'pending')], name='Pending')
    trace3 = go.Bar(x=pv.index, y=pv[('Quantity', 'presented')], name='Presented')
    trace4 = go.Bar(x=pv.index, y=pv[('Quantity', 'won')], name='Won')
    app = dash.Dash()
    app.layout = html.Div(children=[
        html.H1(children='Sales Funnel Report'),
        html.Div(children='''National Sales Funnel Report.'''),
        dcc.Graph(
            id='example-graph',
            figure=
                'data': [trace1, trace2, trace3, trace4],
                'layout':
                go.Layout(title='Order Status by Customer', barmode='stack')
            )
    ])
    return  render_template('fake.html', dashboard = dcc.Graph) 

【参考方案1】：

为避免混淆 Flask 和 Dash 对象，让我们将 Flask 对象重命名为 server（它们在您的代码中都称为 app），即

...
server = Flask(__name__)
...

现在，要将 Dash 应用程序与 Flask 服务器集成，您只需将 server 作为关键字传递，

...
app = dash.Dash(server=server, url_base_pathname="/app_base_path/")
...

url_base_pathname 参数是可选的，它只允许您控制 Dash 应用程序注册的路径。

【讨论】：

谢谢你，@emher。澄清，请写第二行代码。在 server=server 部分中，如果我的烧瓶应用程序位于目录中，例如，mainapp/some/path/app.py 并且破折号应用程序位于 mainapp/dashdirectory/dashapp.py', should I modify the server=server` 行中以反映这一点？