在使用 flask 呈現的 html 頁面內顯示 plotly 等值線

Question

我目前正在使用下面給出的代碼來開發使用plotly的等值線 map。 我想將此圖嵌入到使用 flask 渲染的 HTML 頁面中。 有什么解決方案嗎？

import plotly.express as px
import dash_core_components as dcc
import dash_html_components as html

df = px.data.gapminder().query("year==2007")
fig = px.choropleth(df, locations="iso_alpha",
                    color="lifeExp", # lifeExp is a column of gapminder
                    hover_name="country", # column to add to hover information
                    color_continuous_scale=px.colors.sequential.Plasma)
fig.show()

Answer 1

如果您已經在運行 Flask 服務器，您可以考慮通過 Dash 提供該圖，

import dash
import plotly.express as px
import dash_core_components as dcc
from flask import Flask


def my_figure():
    df = px.data.gapminder().query("year==2007")
    return px.choropleth(df, locations="iso_alpha",
                         color="lifeExp",  # lifeExp is a column of gapminder
                         hover_name="country",  # column to add to hover information
                         color_continuous_scale=px.colors.sequential.Plasma)


# Assume this is your current flask server.
server = Flask(__name__)
# Create a dash app that binds to your current server with some prefix.
app = dash.Dash(server=server, routes_pathname_prefix="/my_figure/")
# Generate the figure you need.
app.layout = dcc.Graph(figure=my_figure(), style={"width": "100%", "height": "100vh"})

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

使用此代碼，可以在http://127.0.0.1:8050/my_figure/訪問該圖。 根據您的需要，您可以使用例如 iframe 進行實際嵌入。