Plotly dash，更新 dash 应用 jinja 上的活图？

Question

几天后我有一个 BI 面试，他们要我准备一个仪表板。 我无法访问 Power BI 或 Tableau，因此我正在尝试使用 Plotly dash 构建一些东西，但是我并没有真正使用它构建任何花哨的东西，而且我有点缺乏经验。 我对 web 开发非常陌生，并且来自数据背景。 我希望有人能够启发我如何在 Plotly dash 中使用 jinja。

我在下面有我的应用程序布局，有人帮我解决了我遇到的下拉问题并且它正在组合在一起，我希望这里的一位天才能够帮助我。 我要更新的一点是它说的工作总数，然后输入在其他地方计算的值。 我知道在 HTML 你会使用 {{}} 但这会引发错误。

此外，如果您是 plotly 仪表板向导，请您帮我弄清楚我的仪表板布局不同。 目前的布局是

图 图 图 图

但我试图让它看起来更像

图 图 文字 图 图

我喜欢这里的社区有多棒，并提前感谢您的帮助。

app.layout = html.Div([
    html.H1("New York City Job Postings", 
    style = {'text-align': 'center', 'font-family': 'Helvetica'}
    ),
    html.P('The total number of jobs is:', {{number_of_jobs}}),
    html.Div(
        className="row",
        children=[
            html.Div(
                className="eight columns",
                children=[
                    html.Div( 
                        #Job postings graph
                                    dcc.Graph(
                                    id='left-graph',
                                    figure=fig,
  
                         )
                    ),
                    #Most job vacancies
                    html.Div(
                        dcc.Graph(
                            id='right-graph',
                            figure=fig5
                        )
                    )
                ]
            ),
            
        ]
    ),
    html.Div(
        className="six columns",
        children=[
                    html.Div(
                        [html.H2('Job posting type report', style
                        ={'margin-right': '2em', 'font-family': 'Helvetica'})
                        ]),
                    dcc.Dropdown(id='report_type', 
                                options=[
                                        {'label': 'Full vs part time ', 'value': 'OPT1'},
                                        {'label': 'Internal vs external', 'value': 'OPT2'}
                                        ],
                                placeholder='Select a report type',
                                multi=False,
                                clearable=False,
                                style={'width':800, 
                                'padding':3, 
                                'font-size':20, 
                                'text-align-last':'center', 
                                'font-family': 'Helvetica'}),

                        dcc.Graph(id='report_type_', figure = {}),
                    

                        #Salary Distributions

                    html.Div(
                        [html.H3('Salary Visuals', style=
                        {'margin-right': '2em', 'font-family': 'Helvetica'}
                                )
                            ]
                        ),
                    dcc.Dropdown(id='salary_visuals', 
                                options=[
                                        {'label': 'Distribution Plot', 'value': 'OPT1'},
                                        {'label': 'Box Plot', 'value': 'OPT2'}
                                        ],
                                placeholder='Select a report type',
                                multi=False,
                                clearable=False,
                                style={'width':800, 
                                'padding':3, 
                                'font-size':20, 
                                'text-align-last':'center', 
                                'font-family': 'Helvetica'
                                        }
                                ),

                        dcc.Graph(id='salary_distribution', 
                        figure = {}
    )])
])

Answer 1

欢迎来到 Dash 社区@user14219014，

如果您不需要使用回调，因为您不需要用户交互，您可以执行以下操作：

jobs = len(df)
html.P('The total number of jobs is: {}'.format(jobs))