Fork me on GitHub

plotly-express-5-dash实例1

本文中介绍的是如何利用dash制作单个图形+下拉菜单,主要实现的功能:

  • 一级标题文本的居中
  • 空行实现
  • 下拉菜单的多个参数设置
  • 将透视表变成DF数据框

导入库和包

1
2
3
4
5
6
7
8
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

显示

1
2
3
4
5
6
7
8
# 显示所有列
pd.set_option('display.max_columns', None)

#显示所有行
# pd.set_option('display.max_rows', None)

#设置value的显示长度为100,默认为50
# pd.set_option('max_colwidth',100)

数据

数据是网上下载的,导入之后具体的形式为:

image-20200605140236469

透视求平均后的结果:

image-20200605140315689

将透视表中的数据变成数据框的形式,很巧妙的做法:

image-20200605140401669

绘图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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的图形

本文标题:plotly-express-5-dash实例1

发布时间:2020年06月05日 - 14:06

原始链接:http://www.renpeter.cn/2020/06/05/plotly-express-5-dash%E5%AE%9E%E4%BE%8B1.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Coffee or Tea