如何在图形标题下放置下拉菜单？答案

【问题标题】：How to put a dropdown under figure title?如何在图形标题下放置下拉菜单？
【发布时间】：2020-12-01 11:43:00
【问题描述】：

我正在尝试学习 dash，因为这是我们将在新项目中使用的工具。

问题是，通过搜索我需要的东西，我学会了如何使用下拉菜单更新图形数据，但下拉菜单的位置不是我想要的。

import dash
import dash_table

import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output

import plotly.express as px
import plotly.graph_objects as go

import pickle

import os

import datetime

dirname = os.path.dirname(__file__)

dash_app = dash.Dash(__name__, routes_pathname_prefix='/')

###########   DATA   ###########

with open( os.path.join(dirname, "pickle_data", 'hashtag_statistics.pickle'), 'rb') as f:
    hashtag_statistics = pickle.load(f)

#################     APP LAYOUT DEF     #################

dash_app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown-programas-social',
        value='XXX',
        options=[{'value': x, 'label': x} for x in hashtag_statistics],
        clearable=False,
        style={
            'width': '50%',
            'margin-left': '25%'
        } 
    ),
    dcc.Graph(
        id='graphics',
        style={
            'height': 700
        }
    )
],
className='dropdown-div',
style={
        'background-color': 'white'
}
)

###############    CALLBACK    ###############

@dash_app.callback(
    [Output('graphics', 'figure'),
    Input('dropdown-programas-social', 'value')])
def update_pie(dropdown_values):

    fig = px.pie(hashtag_statistics, values=hashtag_statistics[dropdown_values].values(), 
                  names=hashtag_statistics[dropdown_values].keys(), title='Utilización de hashtags según el programa seleccionado', hole=0.2)


    return [fig]


if __name__ == '__main__':
    dash_app.run_server(debug=True)

我知道该图有自己的标题，我不知道这是否可行，但我希望在图的标题下方有下拉菜单，就好像它在里面一样以增加清晰度。

如果这不可行，我想将标题添加为 HTML 或下拉列表顶部的内容，但我找不到 Plotly Figure 标题的样式。

【问题讨论】：

标签： python python-3.x plotly-dash plotly-python

【解决方案1】：

不确定 - 因为饼图是一个图形 - 而标题是该图形的一部分。但是 - 您可以将此图用作页面的背景图像。看这里： https://community.plotly.com/t/add-background-image-to-html-div/12453/3

【讨论】：