1. 说明
大数据开发过程中，我们常常需要向别人展示一些统计结果，有时候还是实时的统计结果。最好能以网页方式提供，让别人在他的机器上，使用浏览器也能访问。这时候统计工具往往使用Python，而把分析图表画出来使用JavaScript，需要搭建web服务，还涉及中间过程的数据衔接。而Dash能帮我们实现以上所有的工作。
Dash是Python的一个库，使用pip即可安装。用它可以启动一个http server， python调用它做图，而它内部将这些图置换成JavaScript显示，进行数据分析和展示。
2. 安装
$ pip install dash
$ pip install dash-renderer
$ pip install dash-html-components
$ pip install dash-core-components
其中html与网页相关，比如用它实现Title显示及一些与用户的交互操作，core是绘图部分，像我们常用的柱图，饼图，箱图，线图，都可以用它实现。
3. 简单demo
(1) 代码
# -*- coding: utf-8 -*-
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) 运行结果
(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画图功能，还能相互调用，具体见下例。
# -*- coding: utf-8 -*-
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*方式调用每种绘图函数
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) 线图
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) 柱图
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) 直方图
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) 箱图
def test4(app, data):
data['group1'] = data['SpealLength'].apply(lambda x: int(x * 4) / 4.0)
x = data['group1'] # 按length分类，统计width
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) 饼图
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) 图表
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
