How to use iframe in dash/plotly? (Python/HTML)(如何在DASH/PLATTY中使用IFRAME?(Python/Html))
问题描述
我正在创建仪表板,我想使用此交互式地图
网页链接: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')
推荐答案
您就快成功了。只需将IFRAME元素的<;&>语法替换为用于其他元素的破折号语法,
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')
这篇关于如何在DASH/PLATTY中使用IFRAME?(Python/Html)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何在DASH/PLATTY中使用IFRAME?(Python/Html)
基础教程推荐
- HTML5 画布调整为父级 2022-01-01
- 即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值 2022-01-01
- 当木偶师打开Chrome时,不能使用Chrome扩展 2022-01-01
- CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符 2022-01-01
- 使用 jQuery 在悬停时交换 DIV 类 2022-01-01
- 从快速中间件中排除路由 2022-01-01
- 最佳动态 JavaScript/JQuery 网格 2022-01-01
- 带角度的选项卡:仅使用 $http 在单击时加载选项卡 2022-01-01
- 在 Javascript 中使用 Fetch API 上传文件并显示进度 2022-01-01
- 逻辑运算符 ||在 javascript 中,0 代表 Boolean false? 2022-01-01
