问题描述
此问题与蒂姆·邓恩（Tim Dunn）在此question中提出的问题接连。
@ Kristian Haga已经回答了。但我想继续在答案部分提问，@@ Bhargav-rao禁止这样做。
他要我重新制作一个，真的可以肯定，有人会回答。
为了使大家理解，我在此处复制并粘贴了Tim Dunn问题和Khristian Haga答案。
蒂姆·邓恩（Tim dunn）问如何制作像 
具有完整图形的完整仪表板和一些布局配置。
@Kristian Haga已经通过以下脚本回答了该问题：
import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input,Output
import plotly.express as px
# Iris bar figure
def drawfigure():
return html.Div([
dbc.Card(
dbc.CardBody([
dcc.Graph(
figure=px.bar(
df,x="sepal_width",y="sepal_length",color="species"
).update_layout(
template='plotly_dark',plot_bgcolor= 'rgba(0,0)',paper_bgcolor= 'rgba(0,),config={
'displayModeBar': False
}
)
])
),])
# Text field
def drawText():
return html.Div([
dbc.Card(
dbc.CardBody([
html.Div([
html.H2("Text"),],style={'textAlign': 'center'})
])
),])
# Data
df = px.data.iris()
# Build App
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])
app.layout = html.Div([
dbc.Card(
dbc.CardBody([
dbc.Row([
dbc.Col([
drawText()
],width=3),dbc.Col([
drawText()
],align='center'),html.Br(),dbc.Row([
dbc.Col([
drawfigure()
],dbc.Col([
drawfigure()
],dbc.Col([
drawfigure()
],width=6),dbc.Row([
dbc.Col([
drawfigure()
],width=9),]),color = 'dark'
)
])
# Run app and display result inline in the notebook
app.run_server(mode='external')
结果将像这样 
因此，我只是通过添加更多问题来继续这个问题。更多步骤
如果我想做这样的事情...
该怎么做...？抱歉，如果图片太烂，我赶紧去做...
不同之处是：
- 布局，我在每个图形的顶部放置了一个文本，但有一个列部分将其分成2个部分行
- 其中一个内容是地图怎么了？
- 如果在所有内容以及地图和文本下都存在一个具有透明颜色的图层。
- 如何创建侧边栏
- 如果按下按钮，如何更改标题
任何数据，都可以用它来解释... 就像@ Khristian Haga一样，他使用开源数据库。
我已经找到了几个问题，并在这里说明：
根据here中的线索：
我制作一个像这样的脚本：
首先，我制作一个css文件并将其保存在资产文件夹中，该文件包含如下脚本：
html {
height: 100%;}
body{
margin:0;
width:100%;
height:100%;
background-image: url("./backgroud1.png");
background-size: cover;
background-position: center;}
然后我写一个像这样的脚本：
编辑： 因为我有80％的问题已经回答，所以我将答案放在这里。 以及我之前解释过的几件事，由于字符的限制，我删掉了。
根据我自己的问题和对here的回答，是的，我想是...
我可以做这样的事情：
如果我做某事，使用下拉菜单并按下按钮，它将变成这样：
现在，最后一步是将文本和图像放在图层上，并在按下按钮的同时进行更改。但我现在仍然不知道该怎么做。但是要使布局如上图所示，这就是脚本。
import dash
import dash_core_components as dcc
import dash_html_components as html
from plotly import graph_objs as go
import dash_bootstrap_components as dbc
import plotly.express as px
from dash.dependencies import Input,Output,State
import pandas as pd
# this is the data of the city
data = [['a','b','d','h'],['a','i'],'e','j'],'k'],'c','f','l'],'m'],'g','n'],'o'],['z','x','p','a1'],'a2'],'q','a3'],'a4'],'y','r','a5'],'a6'],'s','a7'],'a8']]
df = pd.DataFrame(data)
df.columns = ['city','district','area','subarea']
city_list = list(set(df['city'].to_list()))
city_list.insert(0,'all city')
#function to help typing code more shorter in the changing title section
# subarea
# ===============
def search_area_from_subarea(area_name):
area_level = list(set(df[df.loc[:,'subarea'] == area_name]['area'].to_list()))[0]
return area_level
def search_district_from_subarea(area_name):
area_level = list(set(df[df.loc[:,'subarea'] == area_name]['district'].to_list()))[0]
return area_level
def search_city_from_subarea(area_name):
area_level = list(set(df[df.loc[:,'subarea'] == area_name]['city'].to_list()))[0]
return area_level
# area
# ===============
def search_district_from_area(area_name):
area_level = list(set(df[df.loc[:,'area'] == area_name]['district'].to_list()))[0]
return area_level
def search_city_from_area(area_name):
area_level = list(set(df[df.loc[:,'area'] == area_name]['city'].to_list()))[0]
return area_level
# district
# ============
def search_city_from_district(area_name):
area_level = list(set(df[df.loc[:,'district'] == area_name]['city'].to_list()))[0]
return area_level
layer1 = html.Div([
dbc.Col([
html.Hr(),# top side
# for title text
dbc.Row([],id='left_side1',style={
'margin-top': '-4px','margin-left': '0px','width': '609px','height': '36px','backgroundColor': 'rgba(120,0.4)'
}
),# for graph,etc
dbc.Row([],id='left_side2',style={
'margin-top': '5px','height': '215px',#middle
# for title text
dbc.Row([],id='left_side3',style={
'margin-top': '9px','width': '314px','backgroundColor': 'rgba(0,50,id='left_side4',#bawah
# for title text
dbc.Row([],id='left_side5',120,id='left_side6',])
])
layer2 = html.Div([
html.Hr(),# for title text
dbc.Col([
dbc.Row([],id='mid_side1',style={
'margin-top': '-540px','margin-left': '330px',etc
dbc.Row([],id='mid_side2',style={
'margin-top': '5px',0.4)'
}
),# for title text
dbc.Row([],id='mid_side3','margin-left': '625px',id='mid_side4',0.4)'
}
)
])
])
layer3 = html.Div([
html.Hr(),# for title text
dbc.Col([
dbc.Row([],id='right_side1',style={
'margin-top': '-548px','margin-left': '957px','width': '579px',id='right_side2',id='right_side3','margin-left': '1251px','width': '285px','backgroundColor': 'rgba(50,id='right_side4',0.4)'
}
)
])
])
layer4 = html.Div([])
layer_Boxes = html.Div([
layer1,layer2,layer3,layer4],style={
'margin-top': '0px','margin-left': '323px','width': '1568px','height': '813px',0.3)'
}
)
SIDEBAR_STYLE = {
"position": "fixed","top": '-15px',"left": '0',"bottom": '0',"width": "16rem","height": "100%","padding": "2rem 1rem","background-color": "rgba(0,0.2)",'align': 'center'
}
app = dash.Dash()
app.layout= html.Div([
dbc.Nav(
[html.Div([html.Img(src='https://www.gravatar.com/avatar/f2d20dc48eff4d12e2352d39018a41af?s=48&d=identicon&r=PG&f=1')
],style={'height':'100px','width':'100px','margin-top': '-6px','margin-left': '97px'}),dcc.Dropdown(
id='menu_city',clearable=False,value='all city',options=[
{'label': c1,'value': c1}
for c1 in city_list]),dcc.Dropdown(
id='menu_district',value='all district'),dcc.Dropdown(
id='menu_area',value='all area'),dcc.Dropdown(
id='menu_subarea',value='all subarea'),html.Hr(),dbc.Button(id='button_show',children="SHOW DATA",color="info",className="mr-1")
],style=SIDEBAR_STYLE ),html.Div([
dbc.Row(
dbc.Col([
html.H3(id='title_for_test')],align='right',width={'size': '10','offset': '2',},style={'margin-left': '323px','margin-top': '-9px','color': 'rgb(255,255,255)','fontSize': '22px','height' : '100%'}
)
),layer_Boxes
])
])
# =================================
# confifuration to set district dropdown menu change base selection on city dropdown menu
@app.callback(dash.dependencies.Output('menu_district','options'),[Input('menu_city','value')])
def set_list(selected_options):
if selected_options == 'all city':
temp_list = list(set(df['district'].to_list()))
temp_list.insert(0,'all district')
return [{'label': i,'value': i} for i in temp_list]
else:
temp_list = list(set(df[df.loc[:,'city'] == selected_options]['district'].to_list()))
temp_list.insert(0,'value': i} for i in temp_list]
# -----------------------------
# configuration to prevent district dropdown menu error
@app.callback(dash.dependencies.Output('menu_district','value'),[Input('menu_district','options')])
def set_list(selected_options):
return selected_options[0]['value']
# =======================================
# confifuration to set area dropdown menu change base selection on district dropdown menu
@app.callback(dash.dependencies.Output('menu_area','value')],multi = True)
def set_list(selected_options1,selected_options2):
# 2 input,means: 2**2 possibility
#print('1',selected_options1)
#print('2',selected_options2)
if selected_options1 == 'all city' and selected_options2 == 'all district':
temp_list = list(set(df['area'].to_list()))
temp_list.insert(0,'all area')
return [{'label': i,'value': i} for i in temp_list]
if selected_options1 != 'all city' and selected_options2 == 'all district':
temp_list = list(set(df[(df.loc[:,'district'] == selected_options2)]['area'].to_list()))
temp_list.insert(0,'value': i} for i in temp_list]
if selected_options1 == 'all city' and selected_options2 != 'all district':
temp_list = list(set(df[(df.loc[:,'value': i} for i in temp_list]
if selected_options1 != 'all city' and selected_options2 != 'all district':
temp_list = list(set(df[(df.loc[:,'city'] == selected_options1) & (df.loc[:,'value': i} for i in temp_list]
# -----------------------------
# configuration to prevent area dropdown menu error
@app.callback(dash.dependencies.Output('menu_area',[Input('menu_area','options')])
# ========================================
# confifuration to set subarea dropdown menu change base selection on area dropdown menu
@app.callback(dash.dependencies.Output('menu_subarea',multi=True
)
def set_list(selected_options1,selected_options2,selected_options3):
# 3 input = 2**3 possibility
# possibility 1:
if selected_options1 == 'all city' and selected_options2 == 'all district' and selected_options3 == 'all area':
temp_list = list(set(df['subarea'].to_list()))
temp_list.insert(0,'all subarea')
return [{'label': i,'value': i} for i in temp_list]
# possibility 2:
if selected_options1 == 'all city' and selected_options2 == 'all district' and selected_options3 != 'all area':
temp_list = list(set(df[(df.loc[:,'area'] == selected_options3)]['subarea'].to_list()))
temp_list.insert(0,'value': i} for i in temp_list]
# possibility 3:
if selected_options1 == 'all city' and selected_options2 != 'all district' and selected_options3 == 'all area':
temp_list = list(set(df[(df.loc[:,'district'] == selected_options2)]['subarea'].to_list()))
temp_list.insert(0,'value': i} for i in temp_list]
# possibility 4:
if selected_options1 != 'all city' and selected_options2 == 'all district' and selected_options3 == 'all area':
temp_list = list(set(df[(df.loc[:,'city'] == selected_options1)]['subarea'].to_list()))
temp_list.insert(0,'value': i} for i in temp_list]
# possibility 5:
if selected_options1 != 'all city' and selected_options2 != 'all district' and selected_options3 == 'all area':
temp_list = list(set(df[(df.loc[:,'value': i} for i in temp_list]
# possibility 6:
if selected_options1 != 'all city' and selected_options2 == 'all district' and selected_options3 != 'all area':
temp_list = list(set(df[(df.loc[:,'value': i} for i in temp_list]
# possibility 7:
if selected_options1 == 'all city' and selected_options2 != 'all district' and selected_options3 != 'all area':
temp_list = list(set(df[(df.loc[:,'district'] == selected_options2) & (df.loc[:,'value': i} for i in temp_list]
# possibility 8:
if selected_options1 != 'all city' and selected_options2 != 'all district' and selected_options3 != 'all area':
temp_list = list(set(df[(df.loc[:,'value': i} for i in temp_list]
# -----------------------------
# configuration to prevent subarea dropdown menu error
@app.callback(dash.dependencies.Output('menu_subarea',[Input('menu_subarea','options')])
def set_list(selected_options):
return selected_options[0]['value']
#configuration callback button
@app.callback(dash.dependencies.Output('title_for_test','children'),[Input('button_show','n_clicks' )],[State('menu_city',[State('menu_district',[State('menu_area',[State('menu_subarea',multi=True)
def eksekusi(n_clicks,number1,number2,number3,number4):
# provinsi
if number1 == 'all city' and number2 == 'all district' and number3 == 'all area' and number4 == 'all subarea':
return 'DEmogRAFIC DATA OF MY STATE'
# city / city
if number1 != 'all city' and number2 == 'all district' and number3 == 'all area' and number4 == 'all subarea':
return 'DEmogRAFIC DATA OF ' + number1 + ' CITY'
# district
if (number1 == 'all city' or number1 != 'all city') and number2 != 'all district' and number3 == 'all area' and number4 == 'all subarea':
return 'DEmogRAFIC DATA disTRICT ' + number2 + ',CITY ' + search_city_from_district(number2)
# area
if (number1 == 'all city' or number1 != 'all city') and (number2 == 'all district' or number2 != 'all district') and number3 != 'all area' and number4 == 'all subarea':
return 'DEmogRAFIC DATA AREA ' + number3,'disTRICT ' + search_district_from_area(number3) + ',CITY ' + search_city_from_area(number3)
# subarea
if (number1 == 'all city' or number1 != 'all city') and (number2 != 'all district' or number2 == 'all district') and (number3 != 'all area' or number3 == 'all area') and number4 != 'all subarea':
return 'DEmogRAFIC DATA SUBAREA ' + number4 + ',AREA ' + search_area_from_subarea(number4),'disTRICT ' + search_district_from_subarea(number4) + ',CITY ' + search_city_from_subarea(number4)
if __name__ == "__main__":
app.run_server(host='127.0.0.1',port='8051')
特别是关于手动驱动元素（例如玩游戏（使用键盘）），直到感觉到它在正确的位置，然后查看周边，然后将其复制到脚本中。
在检查元素（右键单击浏览器时显示的选项菜单之一）中播放它。顺便说一句，我没有删除图片，我在下面预览。希望你能想象得到。下一次，如果我已经知道如何回调按钮以更改仪表板中的图形，我将在答案部分中发布。
这是我用来解释由于stackoverflow.com的限制而已经编辑/删除的某些步骤的图片。
复制格式样式
键入后双击数字，使用键盘上的向上/向下箭头增大或减小数字值，元素将基于增大/减小的值移动或更改。在感觉到符合自己的口味之后，请查看值，然后复制到代码中。设置代码值的简单方法。
这是我已经回答的问题的列表。
- 布局，我在每个图形的顶部放置一个文本，但有一个列部分将其分成2个部分行。回答
- 其中一个内容是地图怎么办？回答
- 如果在所有内容以及地图和文本下都存在一个具有透明颜色的图层。回答
- 如何创建侧边栏。答案
- 如果按下按钮，如何更改标题。回答。
新问题：
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）