Dash入门
|Word count:1.4k|Reading time:6min|Post View:
Dash 入门
1. 说明
大数据开发过程中，我们常常需要向别人展示一些统计结果，有时候还是实时的统计结果。最好能以网页方式提供，让别人在他的机器上，使用浏览器也能访问。这时候统计工具往往使用
Python，而把分析图表画出来使用 JavaScript，需要搭建 web
服务，还涉及中间过程的数据衔接。而 Dash 能帮我们实现以上所有的工作。
Dash 是 Python 的一个库，使用 pip 即可安装。用它可以启动一个 http
server，python 调用它做图，而它内部将这些图置换成 JavaScript
显示，进行数据分析和展示。
2. 安装
1
2
3
4
| $ pip install dash
$ pip install dash-renderer
$ pip install dash-html-components
$ pip install dash-core-components
|
其中 html 与网页相关，比如用它实现 Title
显示及一些与用户的交互操作，core
是绘图部分，像我们常用的柱图，饼图，箱图，线图，都可以用它实现。
3. 简单 demo
(1) 代码
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
|
import dash
import dash_core_components
import dash_html_components
import numpy
x = numpy.linspace(0, 2 * numpy.pi, 100)
y = 10 * 2 * numpy.cos(t)
app = dash.Dash()
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Testme'),
dash_core_components.Graph(
id='curve',
figure={
'data': [
{'x': x, 'y': y, 'type': 'Scatter', 'name': 'Testme'},
],
'layout': {
'title': 'Test Curve'
} } )
])
if __name__ == '__main__':
app.run_server(debug=True, host='0.0.0.0', port=8051)
|
(2) 运行结果
图片.png
(3) 注意事项
需要注意的是最后一句中的宿主机 host='0.0.0.0'，默认是
127.0.0.1，这样在其它机器访问本机启动的 dash 以及在 docker 启动 dash
时可能遇到问题，设置成 0.0.0.0 后，通过本机上的任意一个 IPV4
地址都能访问到它。
4. 与 Flask
相结合支持显示多个页面
用上述方法，可以提供单个网页显示，但如果需要展示的内容很多，或者需要分类展示时，就需要提供多个界面以及在各个界面间跳转。Flask
是一个使用 Python 编写的轻量级 Web 应用框架，Dash 的 Web
框架就是调用它实现的，在程序中结合二者，即可以显示一网页，还能实现 Dash
画图功能，还能相互调用，具体见下例。
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
|
import numpy as np
import pandas as pd
from flask import Flask
import dash
import dash_core_components as dcc
import dash_html_components as html
server = Flask(__name__)
app1 = dash.Dash(__name__, server=server, url_base_pathname='/dash/')
app1.layout = html.Div([
html.Div(
children=[html.H1(children='趋势 1'),]
)
])
@server.route('/test')
def do_test():
return "aaaaaaaaaaaaaaaaa"
@server.route('/')
def do_main():
return "main"
if __name__ == '__main__':
server.run(debug=True, port=8501, host="0.0.0.0")
|
此时，在浏览器中分别打开：http://0.0.0.0:8501/,
http://0.0.0.0:8501/test，http://0.0.0.0:8501/dash，这时可以分别看 dash
生在网页和普通网页。
5. 各种常用图
(1) 环境
三个例中使用的数据库中 sklearn 自带的 iris 数据集的前 30 个实例，以
test* 方式调用每种绘图函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import dash
import dash_core_components
import dash_html_components
import numpy as np
from sklearn import datasets
import pandas as pd
import plotly.figure_factory as ff
iris=datasets.load_iris()
data = pd.DataFrame(iris.data, columns=['SpealLength', 'Spealwidth',
'PetalLength', 'PetalLength'])
data = data[:30]
app = dash.Dash()
test4(app, data)
app.run_server(debug=True)
|
(2) 线图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| def test1(app, data):
y = np.array(data['SpealLength'])
x = range(len(y))
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Demo'),
dash_core_components.Graph(
id='line',
figure={
'data': [
{'x': x, 'y': y, 'type': 'Scatter', 'name': 'Line'},
],
'layout': {
'title': '线图'
}
}
)
])
|
(3) 柱图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| def test2(app, data):
y = np.array(data['SpealLength'])
x = range(len(y))
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Demo'),
dash_core_components.Graph(
id='bar',
figure={
'data': [
{'x': x, 'y': y, 'type': 'bar', 'name': 'Bar'},
],
'layout': {
'title': '柱图'
}
}
)
])
|
(4) 直方图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| def test3(app, data):
y = np.array(data['SpealLength'])
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Demo'),
dash_core_components.Graph(
id='hist',
figure={
'data': [
dict(
type='histogram', x=y, name='Hist'
)
],
'layout': {
'title': '直方图'
}
}
)
])
|
(5) 箱图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| def test4(app, data):
data['group1'] = data['SpealLength'].apply(lambda x: int(x * 4) / 4.0)
x = data['group1']
y = np.array(data['Spealwidth'])
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Demo'),
dash_core_components.Graph(
id='box',
figure={
'data': [
dict(
type='box', x=x, y=y, name='Box'
)
],
'layout': {
'title': '箱图'
}
}
)
])
|
箱图比较特殊，它是按 x 的 unique 统计 y 的分布。
(6) 饼图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| def test5(app, data):
data['group1'] = data['SpealLength'].apply(lambda x: int(x))
tmp = data.groupby('group1').size().to_frame()
tmp = tmp.rename(columns={0: 'num'})
tmp = np.round(tmp, 4).reset_index(drop=False)
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Demo'),
dash_core_components.Graph(
id='pie',
figure={
'data': [
dict(
type='pie', name='Pie',
labels=tmp['group1'].tolist(),
values=tmp['num'].tolist(),
)
],
'layout': {
'title': '饼图'
}
}
)
])
|
(7) 图表
1
2
3
4
5
6
7
8
9
10
11
| def test6(app, data):
table = ff.create_table(data.head())
for i in range(len(table.layout.annotations)):
table.layout.annotations[i].font.size = 15
app.layout = dash_html_components.Div(children=[
dash_html_components.H1(children='Demo'),
dash_core_components.Graph(
id='table',
figure=table
)
])
|
6. 参考
(1) 官方 demo
https://dash.plot.ly/gallery
(2) 支持多个网页的另一种方法
https://stackoverflow.com/questions/51946300/setting-up-a-python-dash-dashboard-inside-a-flask-app
(3) 最常用例程
https://dash.plot.ly/getting-started
(4) dash 各种界面交互 (最后边)
https://dash.plot.ly/getting-started
(5) dash 交互中各种 callback 处理
https://dash.plot.ly/getting-started-part-2
