本文中介绍的是如何利用dash制作单个图形 下拉菜单,主要实现的功能:
- 一级标题文本的居中
- 空行实现
- 下拉菜单的多个参数设置
- 将透视表变成DF数据框
导入库和包
代码语言:javascript复制import pandas as pd
import plotly_express as px
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
显示
代码语言:javascript复制# 显示所有列
pd.set_option('display.max_columns', None)
#显示所有行
# pd.set_option('display.max_rows', None)
#设置value的显示长度为100,默认为50
# pd.set_option('max_colwidth',100)
数据
数据是网上下载的,导入之后具体的形式为:
透视求平均后的结果:
将透视表中的数据变成数据框的形式,很巧妙的做法:
绘图
代码语言:javascript复制app = dash.Dash(__name__)
app.layout = html.Div([
# 一级标题居中显示
html.H1("application with Dash", style={"text-align": "center"}),
# 下拉菜单
dcc.Dropdown(id="slct_year",
options=[ # 下拉菜单的全部选项值
{"label":'2015',"value":2015},
{"label":'2016',"value":2016},
{"label":'2017',"value":2017},
{"label":'2018',"value":2018}],
multi=False, # 不允许多选
value=2015, # 默认的初始值
style={"width":"50%"}
),
html.Div(id='output_container',children=[]),
html.Br(), # 空行的实现
dcc.Graph(id='my_bee_dash',figure={})
])
# 回调函数
@app.callback( # 输出和输入
[Output('output_container','children'),Output('my_bee_dash','figure')],
[Input('slct_year','value')]
)
# 根据选择的year更新图
def update_graph(option_slctd):
container = "the year chosen by user was:{}".format(option_slctd)
dff = df.copy()
dff = dff[dff["Year"] == option_slctd]
dff = dff[dff["Affected by"] == "Varroa_mites"]
# px作图
fig = px.choropleth(
data_frame = dff,
locationmode = "USA-states",
locations = "state_code",
scope = "usa",
color = "Pct of Colonies Impacted",
hover_data = ['State','Pct of Colonies Impacted'],
color_continuous_scale = px.colors.sequential.YlOrRd,
labels = {'Pct of Colonies Impacted': '% of Bee Colonies'},
template='plotly_dark' # 3种风格之一
)
return container, fig # 返回的是容器和图型figure
if __name__ == "__main__":
app.run_server()
结果
下拉菜单中选择不同的年份,图形会随着变化;默认是2015年的数据
下面是2017的图形