并排绘制虚线图 [英] Plot dash chart side by side
本文介绍了并排绘制虚线图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 2 个图表，我希望它并排显示.并排的条形图和饼图，可能是这两个图表下方的相同条形图.我已经尝试了很多，我非常感谢您的帮助.
这是下面的代码
导入破折号将 dash_core_components 作为 dcc 导入将 dash_html_components 导入为 html按原样导入 plotly.graph_objsfrom dash.dependencies 导入输出、输入、状态将 numpy 导入为 np将熊猫导入为 pd导入 plotly.figure_factory as ff从熊猫导入 read_excel导入 plotly.io 作为 pio# external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']# app = dash.Dash(__name__, external_stylesheets=external_stylesheets)# app = dash.Dash()external_stylesheets = ['https://codepen.io/amyoshino/pen/jzXypZ.css']app = dash.Dash(__name__,external_stylesheets=external_stylesheets)# app = dash.Dash()文件名 ='samplePop1.csv'df = pd.read_csv(file_name)打印(df.head())颜色 她为其'黑色':'#000000'，'文本':'#696969'，'PLOT_COLOR' : '#C0C0C0','白色' : '#FFFFFF','黄金':'#EEBC35'，'棕色':'#53354D'，'绿色':'#42CE90'，'红色':'#F87861'，'黄色':'#F1F145'，'SKY_BLUE' : '#A3DBE1''银':'#CCCCCC'，LIGHT_BLACK":#374649"}#status 下拉菜单选项status_options = []对于 df['Status'].unique() 中的状态:status_options.append({'label':str(status),'value':status})# print(status_options)#饼图静态函数def pop_pie():pie_data = df.groupby('Status')['Population Census 1991'].count()pie_dataframe = pie_data.to_frame().reset_index()# 打印(pie_dataframe)# print(df['Status'].unique())# print(pie_data.tolist())# print(type(pie_data.tolist()))# print(pie_data['Status'].tolist())# print(pie_data['Population Census 1991'].tolist())trace1 = go.Pie(标签 = pie_dataframe['Status'].tolist(),values= pie_dataframe['Population Census 1991'].tolist(),文本信息='标签+百分比'，name='population 1991 status wise',pull=[0,0,0,0,0,0,0,0,0])数据 = [trace1]布局 布标题='饼图',)fig = go.Figure(数据=数据)返回无花果'''#Barchart 静态函数def pop_bar():trace1 =go.Bar(y=df['Population Census 1991'],x=df['Name'],name ='1991',标记 = {'color' : colors['GREEN']}# 方向='h')trace2 =go.Bar(y=df['Population Census 2001'],x=df['Name'],name ='2001',标记 = {'color' : colors['RED']}# 方向='h')trace3 = go.Bar(y=df['Population Census 2011'],x=df['Name'],name ='2011',标记 = {'color' : colors['YELLOW']}# 方向='h')数据 = [trace1, trace2, trace3]#layout = go.Layout(barmode='group', xaxis={'categoryorder':'array', 'categoryarray':df['District']})# layout = go.Layout(barmode='group', xaxis={'categoryorder':'total descending'})布局 = go.Layout(title='人口普查'，paper_bgcolor=colors['LIGHT_BLACK'],plot_bgcolor=colors['LIGHT_BLACK'],font ={'color' : colors['WHITE']},xaxis_tickfont_size=14,yaxis=dict(showgrid=False,标题='人口'，titlefont_size=16,tickfont_size=14,),图例=字典(x=0,y=1.0,bgcolor='rgba(255, 255, 255, 0)',bordercolor='rgba(255, 255, 255, 0)',方向=h"),barmode='组',bargap=0.15，相邻位置坐标条之间的#gap.bargroupgap=0.1，相同位置坐标的条之间的#gap.xaxis={'categoryorder':'total descending'})fig = go.Figure(数据=数据，布局=布局)返回无花果'''app.layout = html.Div(children=[html.div([html.H1("测试仪表板",样式 = {'textAlign' : 'center','color' : colors['SILVER']}),html.Div('由 Centroxy 解决方案 pvt.ltd 开发',样式 = {'textAlign' : 'right','color' : colors['SILVER']}),html.img(src="https://i.imgur.com/CIxE22f.png",className='三列'，风格={'高度':'9%'，宽度":9%"，'浮动':'正确'，'位置':'相对'，'margin-top': '-91px',}),html.Br(),html.Br()],style={'backgroundColor': 颜色['LIGHT_BLACK']}),html.div(dcc.Dropdown(id='status_picker',options=status_options,placeholder="选择状态",style = {'color' : colors['LIGHT_BLACK']},多=真，可清除=真，可搜索=真)#,style={"background-color": colors['LIGHT_BLACK']},style={'backgroundColor': colors['LIGHT_BLACK']}),html.div([dcc.Graph(id='条形图')]),html.div([dcc.Graph(id='饼图', 图=pop_pie())]),])@app.callback(Output('Bar-Chart','figure'),[输入('status_picker','value')])def update_figure(selected_status):打印(selected_status)如果selected_status == [] 或 selected_status == 无:trace1 =go.Bar(y=df['Population Census 1991'],x=df['Name'],name ='1991',标记 = {'color' : colors['GREEN']}# 方向='h')trace2 =go.Bar(y=df['Population Census 2001'],x=df['Name'],name ='2001',标记 = {'color' : colors['RED']}# 方向='h')trace3 = go.Bar(y=df['Population Census 2011'],x=df['Name'],name ='2011',标记 = {'color' : colors['YELLOW']}# 方向='h')别的:Filtered_df = df[df['Status'].isin(selected_status)]打印(filtered_df)trace1=go.Bar(y=filtered_df['Population Census 1991'],x=filtered_df['Name'],name 来自标记 = {'color' : colors['GREEN']}# 方向='h')trace2=go.Bar(y=filtered_df['Population Census 2001'],x=filtered_df['Name'],name ='2001',标记 = {'color' : colors['RED']}# 方向='h')trace3=go.Bar(y=filtered_df['Population Census 2011'],x=filtered_df['Name'],name ='2011',标记 = {'color' : colors['YELLOW']}# 方向='h')痕迹= [trace1,trace2,trace3]'''对于 filtered_df['Status'].unique() 中的状态:df_by_status = filtered_df[filtered_df['Status'] == selected_status]traces.append(go.Bar(y=df_by_status['Population Census 1991'],x=df_by_status['Name'],name ='1991',标记 = {'color' : colors['GREEN']}# 方向='h'))traces.append(go.Bar(y=df_by_status['Population Census 2001'],x=df_by_status['Name'],name ='2001',标记 = {'color' : colors['RED']}# 方向='h'))traces.append(go.Bar(y=df_by_status['Population Census 2011'],x=df_by_status['Name'],name ='2011',标记 = {'color' : colors['YELLOW']}# 方向='h'))'''返回 {数据":跟踪，布局":go.Layout(title='人口普查'，paper_bgcolor=colors['LIGHT_BLACK'],plot_bgcolor=colors['LIGHT_BLACK'],font ={'color' : colors['WHITE']},xaxis_tickfont_size=14,yaxis=dict(showgrid=False,标题='人口'，titlefont_size=16,tickfont_size=14,),图例=字典(x=0,y=1.0,bgcolor='rgba(255, 255, 255, 0)',bordercolor='rgba(255, 255, 255, 0)',方向=h"),barmode='组',bargap=0.15，相邻位置坐标条之间的#gap.bargroupgap=0.1，相同位置坐标的条之间的#gap.xaxis={'categoryorder':'total descending'})}如果 __name__ == '__main__':app.run_server(port = '8080' , debug ='True')另外背景颜色不完全是我指定的颜色，请帮忙下面附上一张图片
解决方案
你需要使用 row 和 columns className 到 html.Div元素(例如
i have 2 charts and i want it to display side by side . Barchart and piechart side by side and probably the same barchart below these 2 charts.i have tried a lot and i would really appreciate some help.
this is the below code
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Output, Input, State
import numpy as np
import pandas as pd
import plotly.figure_factory as ff
from pandas import read_excel
import plotly.io as pio
# external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
# app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# app = dash.Dash()
external_stylesheets = ['https://codepen.io/amyoshino/pen/jzXypZ.css']
app = dash.Dash(__name__,external_stylesheets=external_stylesheets)
# app = dash.Dash()
file_name = 'samplePop1.csv'
df = pd.read_csv(file_name)
print(df.head())
colors = {
'BLACK' : '#000000',
'TEXT' : '#696969',
'PLOT_COLOR' : '#C0C0C0',
'WHITE' : '#FFFFFF',
'GOLD' : '#EEBC35' ,
'BROWN' : '#53354D' ,
'GREEN' : '#42CE90' ,
'RED' : '#F87861' ,
'YELLOW' : '#F1F145' ,
'SKY_BLUE' : '#A3DBE1' ,
'SILVER': '#CCCCCC' ,
'LIGHT_BLACK' : '#374649'
}
#status options for dropdown
status_options = []
for status in df['Status'].unique():
status_options.append({'label':str(status),'value':status})
# print(status_options)
#Pie chart static function
def pop_pie():
pie_data = df.groupby('Status')['Population Census 1991'].count()
pie_dataframe = pie_data.to_frame().reset_index()
# print(pie_dataframe)
# print(df['Status'].unique())
# print(pie_data.tolist())
# print(type(pie_data.tolist()))
# print(pie_data['Status'].tolist())
# print(pie_data['Population Census 1991'].tolist())
trace1 = go.Pie(
labels = pie_dataframe['Status'].tolist(),
values= pie_dataframe['Population Census 1991'].tolist(),
textinfo='label+percent',
name='population 1991 status wise',pull=[0,0,0,0,0,0,0,0,0]
)
data = [trace1]
layout = go.Layout(
title='piechart',
)
fig = go.Figure(data=data)
return fig
'''
#Barchart static function
def pop_bar():
trace1 =go.Bar(y=df['Population Census 1991'],
x=df['Name'],name ='1991',
marker = {'color' : colors['GREEN']}
# orientation='h'
)
trace2 =go.Bar(y=df['Population Census 2001'],
x=df['Name'],name ='2001',
marker = {'color' : colors['RED']}
# orientation='h'
)
trace3 = go.Bar(y=df['Population Census 2011'],
x=df['Name'],name ='2011',
marker = {'color' : colors['YELLOW']}
# orientation='h'
)
data = [trace1, trace2, trace3]
#layout = go.Layout(barmode='group', xaxis={'categoryorder':'array', 'categoryarray':df['District']})
# layout = go.Layout(barmode='group', xaxis={'categoryorder':'total descending'})
layout = go.Layout(
title='Population Census',
paper_bgcolor=colors['LIGHT_BLACK'],
plot_bgcolor=colors['LIGHT_BLACK'],
font ={'color' : colors['WHITE']},
xaxis_tickfont_size=14,
yaxis=dict(showgrid=False,
title='Population',
titlefont_size=16,
tickfont_size=14,
),
legend=dict(
x=0,
y=1.0,
bgcolor='rgba(255, 255, 255, 0)',
bordercolor='rgba(255, 255, 255, 0)',
orientation="h"
),
barmode='group',
bargap=0.15, # gap between bars of adjacent location coordinates.
bargroupgap=0.1, # gap between bars of the same location coordinate.
xaxis={'categoryorder':'total descending'})
fig = go.Figure(data=data, layout=layout)
return fig
'''
app.layout = html.Div(children=[
html.Div(
[
html.H1("Test Dashboard",
style = {
'textAlign' : 'center',
'color' : colors['SILVER']
}
),
html.Div('Developed by Centroxy Solution pvt.ltd',
style = {
'textAlign' : 'right',
'color' : colors['SILVER']
}
),
html.Img(
src="https://i.imgur.com/CIxE22f.png",
className='three columns',
style={
'height': '9%',
'width': '9%',
'float': 'right',
'position': 'relative',
'margin-top': '-91px',
}),
html.Br(),
html.Br()
],style={'backgroundColor': colors['LIGHT_BLACK']}
),
html.Div(
dcc.Dropdown(id='status_picker',options=status_options,
placeholder="Select Status",
style = {'color' : colors['LIGHT_BLACK']},
multi=True,
clearable=True,
searchable=True
)
#,style={"background-color": colors['LIGHT_BLACK']}
,style={'backgroundColor': colors['LIGHT_BLACK']}
),
html.Div([
dcc.Graph(id='Bar-Chart')
]),
html.Div([
dcc.Graph(id='pie-chart', figure=pop_pie())
]),
])
@app.callback(Output('Bar-Chart','figure'),
[Input('status_picker','value')])
def update_figure(selected_status):
print(selected_status)
if selected_status == [] or selected_status == None:
trace1 =go.Bar(y=df['Population Census 1991'],
x=df['Name'],name ='1991',
marker = {'color' : colors['GREEN']}
# orientation='h'
)
trace2 =go.Bar(y=df['Population Census 2001'],
x=df['Name'],name ='2001',
marker = {'color' : colors['RED']}
# orientation='h'
)
trace3 = go.Bar(y=df['Population Census 2011'],
x=df['Name'],name ='2011',
marker = {'color' : colors['YELLOW']}
# orientation='h'
)
else:
filtered_df = df[df['Status'].isin(selected_status)]
print(filtered_df)
trace1=go.Bar(y=filtered_df['Population Census 1991'],
x=filtered_df['Name'],name ='1991',
marker = {'color' : colors['GREEN']}
# orientation='h'
)
trace2=go.Bar(y=filtered_df['Population Census 2001'],
x=filtered_df['Name'],name ='2001',
marker = {'color' : colors['RED']}
# orientation='h'
)
trace3=go.Bar(y=filtered_df['Population Census 2011'],
x=filtered_df['Name'],name ='2011',
marker = {'color' : colors['YELLOW']}
# orientation='h'
)
traces= [trace1,trace2,trace3]
'''
for status in filtered_df['Status'].unique():
df_by_status = filtered_df[filtered_df['Status'] == selected_status]
traces.append(
go.Bar(y=df_by_status['Population Census 1991'],
x=df_by_status['Name'],name ='1991',
marker = {'color' : colors['GREEN']}
# orientation='h'
))
traces.append(
go.Bar(y=df_by_status['Population Census 2001'],
x=df_by_status['Name'],name ='2001',
marker = {'color' : colors['RED']}
# orientation='h'
))
traces.append(go.Bar(y=df_by_status['Population Census 2011'],
x=df_by_status['Name'],name ='2011',
marker = {'color' : colors['YELLOW']}
# orientation='h'
))'''
return {
'data' : traces,
'layout' : go.Layout(
title='Population Census',
paper_bgcolor=colors['LIGHT_BLACK'],
plot_bgcolor=colors['LIGHT_BLACK'],
font ={'color' : colors['WHITE']},
xaxis_tickfont_size=14,
yaxis=dict(showgrid=False,
title='Population',
titlefont_size=16,
tickfont_size=14,
),
legend=dict(
x=0,
y=1.0,
bgcolor='rgba(255, 255, 255, 0)',
bordercolor='rgba(255, 255, 255, 0)',
orientation="h"
),
barmode='group',
bargap=0.15, # gap between bars of adjacent location coordinates.
bargroupgap=0.1, # gap between bars of the same location coordinate.
xaxis={'categoryorder':'total descending'})
}
if __name__ == '__main__':
app.run_server(port = '8080' , debug ='True')
Also the background colour is not completely the one i specified , please help Attaching an image below
解决方案
you need to use row and columns className to html.Div elements (example here). Alternatively you can use bootstrap elements.
In your case it would be something like:
app.layout = html.Div([
html.Div(
className="row",
children=[
html.Div(
className="six columns",
children=[
html.Div(
children=dcc.Graph(id='left-top-bar-graph')
)
]
),
html.Div(
className="six columns",
children=html.Div(
children=dcc.Graph(id='right-top-pie-graph'),
)
)
]
),
html.Div(
className="row",
children=[
html.Div(
className="twelve columns",
children=[
html.Div(
children=dcc.Graph(id='bottom-bar-graph')
)
]
)
]
)
])
这篇关于并排绘制虚线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
