无法在 plotly 中添加 google 表单

unable to add google form in plotly

下面是我的代码,但是代码不起作用, 下拉列表中的前 5 个选项 returns 图表和 选项 6 需要显示 google 形式

没有第 6 个选项代码工作正常,但是第 6 个显示 gform 的选项在破折号中抛出错误 帮我解决这个问题

app.layout=html.Div(children=[dcc.Dropdown(
     id='FirstDropdown',
     options=[
            {'label':"graph1",'value':'v1'},
            {'label':"graph2",'value':'v2'},
            {'label':"graph3,'value':'v3'},
            {'label':"graph4",'value':'v4'},
            {'label':"graph 5",'value':'v5'},
            {'label':"g-form",'value':'v6'}
           
              
     ],
     placeholder="Please choose an option",
     value='v1'
     ),
     html.Div(dcc.Graph(id='graph'))
     
     

])

@app.callback(
[Output('graph','figure')],

[Input(component_id='FirstDropdown',component_property='value')]
)
def select_graph(value):

if value=='v1':
return fig11
elif value=='v2':
return fig21
elif value=='v3':
return fig31
elif value=='v4':
return fig411
elif value=='v5':
return fig_all
elif value == 'v6':
google_form_iframe = html.Iframe(
        width='640px',
        height='947px',
   src="https://docs.google.com/forms/d/e/1FAIpQLSfkIgHkKlD5Jl4ewfWpA8y9D65UbhdrvZ0k7qXOBI7uFN1aNA/vi ewform?embedded=true"
    )
   return google_form_iframe
  • 从根本上说,dcc.Figure()html.IFrame() 是独立的破折号组件。因此,如果您要显示基于下拉列表的 Iframe 图,请使用 div 容器。来自回调 return 适合此容器的子组件
  • 为了制作完整的工作示例,已使用 COVID 疫苗接种数据生成了 5 个可以从下拉列表中选择的数字。
  • 如果选择 google 表格,则 return 那
import pandas as pd
import plotly.express as px
from jupyter_dash import JupyterDash
import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import json

df = pd.read_csv(
    "https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.csv"
)
df["date"] = pd.to_datetime(df["date"])
df = df.sort_values(["date", "iso_code"])
figs = {
    f"v{n+1}": px.bar(
        df.loc[(df["date"].dt.day_of_week == 6) & df["iso_code"].isin(["DEU", "FRA"])],
        x="date",
        y=c,
        color="iso_code",
    )
    for n, c in zip(range(5), df.select_dtypes("number").columns)
}

# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
    [
        dcc.Dropdown(
            id="FirstDropdown",
            options=[
                {"label": "graph1", "value": "v1"},
                {"label": "graph2", "value": "v2"},
                {"label": "graph3", "value": "v3"},
                {"label": "graph4", "value": "v4"},
                {"label": "graph 5", "value": "v5"},
                {"label": "g-form", "value": "v6"},
            ],
            placeholder="Please choose an option",
            value="v1",
        ),
        dash.html.Div(
            id="graph_container",
        ),
    ]
)


@app.callback(
    Output("graph_container", "children"),
    Input("FirstDropdown", "value"),
)
def select_graph(value):
    if value in figs.keys():
        return dash.dcc.Graph(figure=figs[value])
    else:
        return html.Iframe(
            width="640px",
            height="947px",
            src="https://docs.google.com/forms/d/e/1FAIpQLSfkIgHkKlD5Jl4ewfWpA8y9D65UbhdrvZ0k7qXOBI7uFN1aNA/vi ewform?embedded=true",
        )

app.run_server(mode="inline")