将 dash_html_components 传递给 Jinja 模板答案

【问题标题】：Passing dash_html_components into a Jinja template将 dash_html_components 传递给 Jinja 模板
【发布时间】：2018-06-12 23:15:03
【问题描述】：

我正在使用 Python 库 Dash，文档声称它不支持使用仪表板 html 代码编写原始 html 的能力。是否有已知的解决方法（例如使用 Flask 将 dcc.Graph 传递到 render_template()？）。

我要迁移到 Jinja 模板文件的代码 sn -p 是：

app.layout = html.Div(className='ui container', children=[
    html.H1('Locations', className=''),
    html.Div(id='text-content'),
    dcc.Graph(id='map', figure={
        'data': [{
            'lat': df['LAT'],
            'lon': df['LONG'],
            'marker': {
                'color': df['YEAR'],
                'size': 8,
                'opacity': 0.6
            },
            'customdata': df['NO'],
            'type': 'scattermapbox'
        }],
            },
            'hovermode': 'closest',
            'margin': {'l': 0, 'r': 0, 'b': 0, 't': 0}
        }
    })
])

【问题讨论】：

标签： python flask jinja2 plotly plotly-dash

【解决方案1】：

我以前来过这里并自己问过这个问题，我继续在这里回答：Plotly.offline plot output_type='div' not working inside HTML - How to embed Plotly to HTML

简而言之，要获得通过 Flask 视图呈现的绘图图表，您可以执行以下操作（取自上面的链接）

创建图表
调用pyo.plot() 正常通过无花果，output_type='div' 和include_plotlyjs=False
将该输出传递给通过Markup() 传递的变量（从烧瓶导入）
让Markup(variable) 像传递表单一样通过render_template
使用{{ jinja template }} 在 html 中呈现变量

更多的实际演示：

def my_bar_chart():
    *snip irrelevant*
    my_bar_chart = pyo.plot(fig, output_type='div', include_plotlyjs=False)
    return Markup(my_bar_chart)

现在将您的函数导入到您的 app.py / 任何您的视图所在的位置，并通过渲染模板传递它，就像您处理任何表单一样。

这是一个例子：

def my_page():
    my_bar_chart_var = my_bar_chart()
    return render_template('my_page.html',
                            bar_chart_1=my_bar_chart_var)

然后在该页面的 html 中，只需在 jinja 模板中传递 bar_chart_1，如下所示：

{{ bar_chart_1 }}

【讨论】：

【解决方案2】：

这是我从现有的 Flask、Jinja 模板构建 Dash 模板的操作。

如果您想知道，我构建了一个hybrid web app ，它同时使用了 Flask 和 Dash。

首先将您的“base.html”模板扩展为特定于 Dash 的模板（例如“base_dash.html”），使用 HTML cmets 处理 Dash 需要替换的内容（例如 {%metas%} 或{%app_entry%}:

{% extends "base.html" %}

{% block head %}
  <!-- metas -->
  <title>
    <!-- title -->
  </title>
  <!-- favicon -->
  <!-- css -->
{% endblock %}

{% block body %}
  <!-- app_entry -->

<footer>
  <!-- config -->
  <!-- scripts -->
  <!-- renderer -->
</footer>
{% endblock %}

回到 Python，设置 Dash 应用程序：

    dashapp = dash.Dash()

    # FYI, you need both an app context and a request context to use url_for() in the Jinja2 templates
    with app.app_context(), app.test_request_context():
        layout_dash = pathlib.Path(get_root_path(__name__)).joinpath("templates").joinpath("base_dash.html")

        with open(layout_dash, "r") as f:
            html_body = render_template_string(f.read())

        comments_to_replace = ("metas", "title", "favicon", "css", "app_entry", "config", "scripts", "renderer")
        for comment in comments_to_replace:
            html_body = html_body.replace(f"<!-- {comment} -->", "{%" + comment + "%}")

        dashapp.index_string = html_body

【讨论】：