Plotly dash，更新 dash 应用程序 jinja 上的实时图形？

Posted 2023-03-22

【中文标题】Plotly dash，更新 dash 应用程序 jinja 上的实时图形？

【英文标题】：Plotly dash, updating a live figure on a dash application jinja?

【发布时间】：2022-01-20 02:36:31

【问题描述】：

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

我的应用程序布局如下，有人帮我解决了我遇到的下拉问题，并且我希望这里的一位天才能够帮助我。我要更新的一点是它说的工作总数，然后输入在其他地方计算的值。我知道在 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 = 
    )])
])

【问题讨论】：

欢迎来到 Dash 社区@user14219014，您是否使用回调来更新 html 子项？什么应该更新该html？下拉菜单？

哈哈哈谢谢！我可能需要在这里加上我的名字。我希望 P 标签带有要更新的作业总数。我在 powerbi 和 tableau 仪表板上看到，它们具有随值更新的文本方面。就像这个左侧一样，docs.microsoft.com/en-us/power-bi/consumer/end-user-dashboards。 html.P('作业总数为：', number_of_jobs).我希望用一个值刷新作业数。

你熟悉 Dash 中的回调吗？如果您正在尝试构建 Dash 应用程序，则需要使用回调。如果你不熟悉，我可以教你如何使用回调来更新 html。

我有各种图表和下拉菜单选项的回调 我将如何使用回调来更新作业数量？它来自这个数据 df = pd.read_csv('nyc-jobs.csv') #total number of jobs number_of_jobs = len(df)

也谢谢你，你的帮助真是太棒了

【参考方案1】：

欢迎来到 Dash 社区 @user14219014，

如果你不需要使用回调，因为你不需要用户交互，你可以这样做：

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