将Ploly Dash嵌入到烧瓶应用程序中

Question

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

现在，我正在使用一个从网络上获取的玩具示例来详细学习。第二个代码块启动dash，但我的目标是将第二个代码集成到我的主flask应用程序中。暂时来说，我希望它成为主应用程序中的一条路线（稍后我将把它解析为蓝图模块），但从plotly文档中找不到一个演示如何将它们集成在一起的教学示例。

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

这个链接给了我一些尝试的想法，在一个Flask应用程序中运行Dash应用程序，但我对其中提出的一些想法并不十分成功。

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)

plotly应用程序

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) 

Answer 1

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

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

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

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

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