Сюжетно тире, обновляя живую цифру на даше приложение jinja?

Question

Через несколько дней у меня собеседование с бизнес-аналитикой, и они хотят, чтобы я подготовил информационную панель. У меня нет доступа к Power BI или Tableau, поэтому я пытаюсь создать что-то с помощью Plotly dash, но на самом деле я не создал ничего особенного, используя его, и я немного неопытен. Я новичок в веб-разработке и имею опыт работы с данными. Я надеялся, что кто-нибудь сможет просветить меня о том, как я могу дзиндзя в Plotly dash.

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

Кроме того, если вы мастер сюжетных черт, не могли бы вы помочь мне разобраться в том, чтобы моя панель инструментов выглядела иначе. Макет в настоящее время

Рисунок Рисунок Рисунок Рисунок

но я пытаюсь сделать его более похожим на

Рисунок Рисунок Текст Рисунок Рисунок

Мне нравится, насколько здесь потрясающее сообщество, и заранее благодарю за вашу помощь.

      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))