Как использовать iframe в dash / plotly? (Python / HTML)

#python #html #iframe #dashboard #plotly-dash

#python #HTML #iframe #Информационная панель #plotly-dash

Вопрос:

Я создаю панель мониторинга и хочу использовать эту интерактивную карту

веб-ссылка: https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/causesofdeath/articles/deathsinvolvingcovid19interactivemap/2020-06-12

встроенный код: <iframe height="1043px" width="100%" src="https://www.ons.gov.uk/visualisations/dvc914/map/index.html"></iframe>

Теперь я не так много знаю HTML, но это то, что у меня есть до сих пор. Я знаю, что макет неправильный, но я уже давно застрял, может кто-нибудь указать мне правильное направление. Большое спасибо!

 import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


#H1 = biggest heading,  Div = a box containhg info
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
        
    <iframe height="1067px" width="100%" src="https://www.ons.gov.uk/visualisations/dvc914/map/index.html"></iframe>
    )
])

if __name__ == '__main__':
    app.run_server(debug=True,port=8049,host='127.0.0.1')
  

Ответ №1:

Вы почти на месте. Просто замените синтаксис <> для элемента iframe синтаксисом dash, который вы использовали для других элементов,

 import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        # figure=fig  # commented out to make the example runnable
    ),

    html.Iframe(src="https://www.ons.gov.uk/visualisations/dvc914/map/index.html",
                style={"height": "1067px", "width": "100%"})
])

if __name__ == '__main__':
    app.run_server(debug=True, port=8049, host='127.0.0.1')
  

Комментарии:

1. Как мне получить высоту, чтобы обернуть весь HTML вместо указания точного пикселя?