如何在Dash中并排显示两个图表
问题描述
我有两个要并排显示的图表，一个是条形图，一个是条形图。这两个图表下面的条形图可能是相同的。我已经尝试了很多，我真的很感激你的帮助。
这是我的代码：
import numpy as np
import pandas as pd
from pandas import read_excel
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 plotly.figure_factory as ff
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')
解决方案
您需要使用row和columnshtml.Div元素(例如here)。或者，您也可以使用bootstrap元素。
在您的情况下，应该是这样的：
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')
)
]
)
]
)
])
相关文章