我试图创建一个条形图,我想在其中钻取各个地区,然后查看 3 年范围内各个城市的人口。 基本上我找到了这个 https://community.plotly.com/t/drill-down-function-for-graphs-embedded-in-dash-app/12290/9 但我无法实现
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
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.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' : '#FFFFF'
}
app.layout = html.Div ([
dcc.Graph(
id = 'bar-chart',
figure = { 'data' :
[
{'x' : df['Name'],'y':df['Population Census 1991'],'type':'bar','name':'Population Census 1991'},
{'x' : df['Name'],'y':df['Population Census 2001'],'type':'bar','name':'Population Census 2001'},
{'x' : df['Name'],'y':df['Population Census 2011'],'type':'bar','name':'Population Census 2011'}
],
'layout' : {
'plot_bgcolor' : colors['white'],
'paper_bgcolor' : colors['white'],
'font' : {
'color' : colors['white']
},
'title' : 'Bar Chart',
'orientation':'h'
}
}
)
])
if __name__ == '__main__':
app.run_server(port = '8080' , debug ='True')
当我点击一个地区时,条形图应首先显示 3 年范围内的人口地区情况 它应显示地区明智的比较。 还有另一个基本图表,其中他们将按地区和城市的 2 个点击操作来显示 3 年范围的人口,它应该清楚地显示值,更有可能它应该是可滚动的。
链接到 csv 文件 https://github.com/9192gks/mapbox/blob/master/samplePop1.csv
最佳答案
在callback_context的帮助下查看Dash中的Drill Down示例。
在此示例中,我仅展示了单级向下钻取,以保持简单,但只需进行少量修改即可实现多级向下钻取。 有一个后退按钮可以返回到原始图形。后退按钮仅在向下钻取的第二层显示,并隐藏在原始底层。
代码:
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
# creating a dummy sales dataframe
product_sales = {'vendors':['VANS','VANS','VANS','VANS','NIKE','NIKE','NIKE','ADIDAS','ADIDAS','CONVERSE','CONVERSE','CONVERSE'],
'products': ['Tshirts','Sneakers','Caps','Clothing','Sports Outfit','Sneakers','Caps','Accessories','Bags','Sneakers','Accessories','Tshirts'],
'units sold': [2,15,3,8,37,13,7,4,12,7,8,2]
}
product_sales_df = pd.DataFrame(product_sales)
# all vendors sales pie chart
def sales_pie():
df = product_sales_df.groupby('vendors').sum().reset_index()
fig = px.pie(df, names='vendors',
values='units sold', hole=0.4)
fig.update_layout(template='presentation', title='Sales distribution per Vendor')
return fig
# creating app layout
app.layout = dbc.Container([
dbc.Card([
dbc.Button('🡠', id='back-button', outline=True, size="sm",
className='mt-2 ml-2 col-1', style={'display': 'none'}),
dbc.Row(
dcc.Graph(
id='graph',
figure=sales_pie()
), justify='center'
)
], className='mt-3')
])
#Callback
@app.callback(
Output('graph', 'figure'),
Output('back-button', 'style'), #to hide/unhide the back button
Input('graph', 'clickData'), #for getting the vendor name from graph
Input('back-button', 'n_clicks')
)
def drilldown(click_data,n_clicks):
# using callback context to check which input was fired
ctx = dash.callback_context
trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]
if trigger_id == 'graph':
# get vendor name from clickData
if click_data is not None:
vendor = click_data['points'][0]['label']
if vendor in product_sales_df.vendors.unique():
# creating df for clicked vendor
vendor_sales_df = product_sales_df[product_sales_df['vendors'] == vendor]
# generating product sales bar graph
fig = px.bar(vendor_sales_df, x='products',
y='units sold', color='products')
fig.update_layout(title='<b>{} product sales<b>'.format(vendor),
showlegend=False, template='presentation')
return fig, {'display':'block'} #returning the fig and unhiding the back button
else:
return sales_pie(), {'display': 'none'} #hiding the back button
else:
return sales_pie(), {'display':'none'}
if __name__ == '__main__':
app.run_server(debug=True)
另请查看此 thread了解更多信息。
关于python - 钻取条形图 Dash 绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61700316/