一、介绍

---

1、dash 是什么

dash 是一个基于 Flask (Python) &＃43; React 的 web 框架。

入门指南&＃xff1a;https://dash.plot.ly/getting-started>

二、安装

---

1、安装

pip install dash&＃61;&＃61;0.39.0 # The core dash backend
pip install dash-daq&＃61;&＃61;0.1.0 # DAQ components (newly open-sourced!)

2、启动

$ python app.py

三、使用

---

1、基本框架

import dash

# init dash
external_stylesheets &＃61; [&＃39;https://codepen.io/chriddyp/pen/bWLwgP.css&＃39;]
app &＃61; dash.Dash(__name__, external_stylesheets&＃61;external_stylesheets) # create layout
app.layout &＃61; html.Div(children&＃61;[# ……
]),if __name__ &＃61;&＃61; &＃39;__main__&＃39;:# debug&＃61;True 激活所有开发工具&＃xff0c;可选参数参考&＃xff08;https://dash.plot.ly/devtools&＃xff09;app.run_server(debug&＃61;True,dev_tools&＃61;)

2、组件

Declarative UI —— 声明式 UI

&＃xff08;1&＃xff09;html 元素

import dash_html_components as html

class/style 跟 react 的写法规范差不多。

# html.H1(children&＃61;&＃39;Hello Dash&＃39;) &＃61; html.H1(&＃39;Hello Dash&＃39;)html.H1(&＃39;Hello Dash&＃39;),html.H1(id&＃61;"h1-element", className&＃61;&＃39;h1&＃39;, children&＃61;&＃39;Hello Dash&＃39;,
style&＃61;{&＃39;textAlign&＃39;: &＃39;center&＃39;, &＃39;color&＃39;: &＃39;#7FDBFF&＃39;}),

布局

# 嵌套html.Div(children&＃61;[html.Div(&＃39;111&＃39;),html.Div(&＃39;222&＃39;),html.Div(&＃39;333&＃39;),]),

# 12网格布局 html.Div(className&＃61;&＃39;row&＃39;, children&＃61;[html.Div(&＃39;111&＃39;, className&＃61;&＃39;four columns&＃39;),html.Div(&＃39;222&＃39;, className&＃61;&＃39;four columns&＃39;),html.Div(&＃39;333&＃39;, className&＃61;&＃39;four columns&＃39;),]),# 更多预设 className 可以查看&＃xff1a; https://codepen.io/chriddyp/pen/bWLwgP.css# tips&＃xff1a;className&＃61;&＃39;four columns&＃39; 其实是三列&＃xff0c;className&＃61;&＃39;three columns&＃39; 其实是四列&＃xff0c;意思是用 12 除以它。

&＃xff08;2&＃xff09;python 封装的组件

import dash_core_components as dcc

import plotly.graph_objs as go

包括但不限于 单选框、下拉框、Markdown、Store、Graphs……&＃xff0c;更多组件https://dash.plot.ly/dash-core-components

# draw Graphdcc.Graph(id&＃61;&＃39;cluster_count&＃39;,figure&＃61;{&＃39;data&＃39;: [go.Bar(x&＃61;[1,2,3],y&＃61;[100,200,300],text&＃61;[&＃39;100个&＃39;,&＃39;200个&＃39;,&＃39;300个&＃39;],textposition&＃61;&＃39;auto&＃39;,)],&＃39;layout&＃39;: go.Layout()},), # figure 属性下有 ”data“&＃43;"layout" 属性

它基于plotly.py画图库 https://plot.ly/python/&＃xff0c;画图库又基于SVG和WebGL (默认为 SVG&＃xff0c;对大型数据集会切换到WebGL)。

# 组件用法帮助
>>> help(dcc.Dropdown)

loading 组件

dcc.Loading执行回调的过程中会显示type属性设置的 loading 图标&＃xff0c; 而回调完成后会显示children里的内容。

dcc.Loading(id&＃61;"loading-1", children&＃61;[html.Div(id&＃61;"loading-output-1")], type&＃61;"default"),
dcc.Input(id&＃61;"input-1", value&＃61;&＃39;1&＃39;),&＃64;app.callback(Output("loading-output-1", "children"), [Input("input-1", "value")])
def input_triggers_spinner(value):time.sleep(1)return value

这里的回调&＃64;app.callback在下面会有介绍。

Interval 组件

dcc.Interval&＃xff0c;interval设置间隔时间&＃xff0c;n_intervals记录触发次数。

dcc.Interval(id&＃61;&＃39;interval-component&＃39;,interval&＃61;1*1000, # in millisecondsn_intervals&＃61;0)&＃64;app.callback(Output(&＃39;interval-component-div&＃39;, &＃39;children&＃39;),[Input(&＃39;interval-component&＃39;, &＃39;n_intervals&＃39;)])
def update_metrics(n):return "Already run {} times".format(n)

&＃xff08;3&＃xff09;创建自己的组件

略

3、回调

Reactive Programming —— 反应式编程

from dash.dependencies import Input, Output, State

dcc.Input(id&＃61;&＃39;my-input&＃39;, value&＃61;&＃39;initial value&＃39;, type&＃61;&＃39;text&＃39;),
dcc.Input(id&＃61;&＃39;my-input-2&＃39;, value&＃61;&＃39;initial value&＃39;, type&＃61;&＃39;text&＃39;),
html.Button(id&＃61;&＃39;submit-button&＃39;, n_clicks&＃61;0, children&＃61;&＃39;Submit&＃39;),
html.Div(id&＃61;&＃39;my-div&＃39;),
html.Div(id&＃61;&＃39;my-div-2&＃39;) &＃64;app.callback([Output(component_id&＃61;&＃39;my-div&＃39;, component_property&＃61;&＃39;children&＃39;),Output(component_id&＃61;&＃39;my-div-2&＃39;, component_property&＃61;&＃39;children&＃39;)],# 简写形式&＃xff08;省略 component_id &＃43; component_property&＃xff09;[Input(&＃39;submit-button&＃39;, &＃39;n_clicks&＃39;)],[State(component_id&＃61;&＃39;my-input&＃39;, component_property&＃61;&＃39;value&＃39;),State(component_id&＃61;&＃39;my-input-2&＃39;, component_property&＃61;&＃39;value&＃39;)]
)
def update_output_div(n_clicks, input_value, input_value_2):return &＃39;You\&＃39;ve entered "{}" and "{}"&＃39;.format(input_value, input_value_2), &＃39;You\&＃39;ve click : "{}" times&＃39;.format(n_clicks)

注意事项(坑)

(1)每一个 callback 都会发送一个请求。

(2)所有回调里的 Input 都必须有Output。

(3)同一个组件可以出现在多个回调的Input&＃xff1b;但是在 Output 上&＃xff0c;只能出现在一处回调里。

(4)不支持组件的双向绑定。

&＃64;app.callback(Output(&＃39;my-id-2&＃39;, &＃39;value&＃39;),[Input(&＃39;my-id&＃39;, &＃39;value&＃39;)])
def aaa(data): print("11:"&＃43;data)return data &＃64;app.callback(Output(&＃39;my-id&＃39;, &＃39;value&＃39;),[Input(&＃39;my-id-2&＃39;, &＃39;value&＃39;)])
def bbb(data): print("22:"&＃43;data)return data

官方说这个 feature 暂时没有解决&＃xff0c;具体时间未知。详细讨论如下&＃xff1a;

https://community.plot.ly/t/interdependent-components/8299/4

https://community.plot.ly/t/two-way-binding-for-rangeslider-and-input-fields-without-dependency-loop/4810

(5)在回调中共享数据

dash 有个原则就是Callbacks绝不能修改其范围之外的变量。

但我们有时候需要用到共享数据&＃xff0c;比如引入缓存机制来提高性能&＃xff0c;这个时候应该怎么办呢&＃xff1f;

方法一&＃xff1a;存到当前用户的浏览器会话中(例如隐藏 DIV)

方法二&＃xff1a;存到服务器磁盘上(例如文件或数据库)

方法三&＃xff1a;存到服务器内存上(例如Redis)

持久化需要把数据序列化( 比如 toJSON() )&＃xff0c;对于复杂的数据&＃xff0c;推荐使用apache arrow。

其中方法二和三可以使用Flask-Caching来实现。

pip install Flask-Caching

实现回调的缓存机制&＃xff1a;

from flask_caching import Cachecache &＃61; Cache(app.server, config&＃61;{&＃39;CACHE_TYPE&＃39;: &＃39;filesystem&＃39;,&＃39;CACHE_DIR&＃39;: &＃39;cache-directory&＃39;
})
# use redis
# &＃39;CACHE_TYPE&＃39;: &＃39;redis&＃39;,
# &＃39;CACHE_REDIS_URL&＃39;: os.environ.get(&＃39;REDIS_URL&＃39;, &＃39;&＃39;)html.Div(id&＃61;&＃39;flask-cache-memoized-children&＃39;),dcc.RadioItems(id&＃61;&＃39;flask-cache-memoized-dropdown&＃39;,options&＃61;[{&＃39;label&＃39;: &＃39;Option {}&＃39;.format(i), &＃39;value&＃39;: &＃39;Option {}&＃39;.format(i)}for i in range(1, 4)],value&＃61;&＃39;Option 1&＃39;),html.Div(&＃39;Results are cached for {} seconds&＃39;.format(TIMEOUT)),&＃64;app.callback(Output(&＃39;flask-cache-memoized-children&＃39;, &＃39;children&＃39;),[Input(&＃39;flask-cache-memoized-dropdown&＃39;, &＃39;value&＃39;)])
&＃64;cache.memoize(timeout&＃61;60) # in seconds
def render(value):return &＃39;Selected "{}" at "{}"&＃39;.format(value, datetime.datetime.now().strftime(&＃39;%H:%M:%S&＃39;))

4、交互

只适用于dash_core_components

目前只支持四种交互方式&＃xff1a; hoverData, clickData, selectedData, relayoutData。

&＃64;app.callback(Output(&＃39;click-data&＃39;, &＃39;children&＃39;),[Input(&＃39;cluster_count&＃39;, &＃39;clickData&＃39;)])
def display_click_data(clickData):return json.dumps(clickData, indent&＃61;2)

注意事项(坑)

&＃xff08;1&＃xff09;回调时的形参不能随意指定

&＃64;app.callback(Output(&＃39;hover-data&＃39;, &＃39;children&＃39;),[Input(&＃39;cluster_count&＃39;, &＃39;hoverData&＃39;)])
# tips: 这里形参的hoverData不可以随便指定其他称呼&＃xff0c;否则会获取不到值
def display_hover_data(hoverData):return json.dumps(hoverData, indent&＃61;2)

&＃xff08;2&＃xff09;暂不支持设置悬停和点击时的样式修改。

5、CSS & JS (& Header )

(1)外部文件(需手动引入)

# external_stylesheets
external_stylesheets &＃61; [&＃39;https://codepen.io/chriddyp/pen/bWLwgP.css&＃39;,{&＃39;href&＃39;: &＃39;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css&＃39;,&＃39;rel&＃39;: &＃39;stylesheet&＃39;,&＃39;integrity&＃39;: &＃39;sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO&＃39;,&＃39;crossorigin&＃39;: &＃39;anonymous&＃39;}
]# external_scripts
external_scripts &＃61; [&＃39;https://www.google-analytics.com/analytics.js&＃39;,{&＃39;src&＃39;: &＃39;https://cdn.polyfill.io/v2/polyfill.min.js&＃39;},{&＃39;src&＃39;: &＃39;https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js&＃39;,&＃39;integrity&＃39;: &＃39;sha256-Qqd/EfdABZUcAxjOkMi8eGEivtdTkh3b65xCZL4qAQA&＃61;&＃39;,&＃39;crossorigin&＃39;: &＃39;anonymous&＃39;}
]meta_tags &＃61; [{&＃39;name&＃39;: &＃39;description&＃39;,&＃39;content&＃39;: &＃39;My description&＃39;},{&＃39;http-equiv&＃39;: &＃39;X-UA-Compatible&＃39;,&＃39;content&＃39;: &＃39;IE&＃61;edge&＃39;}
]# init dash
app &＃61; dash.Dash(__name__, external_stylesheets&＃61;external_stylesheets,external_scripts&＃61;external_scripts,meta_tags&＃61;meta_tags)

(2)CDN文件(需手动引入)

app &＃61; dash.Dash(__name__,assets_external_path&＃61;&＃39;http://your-external-assets-folder-url/&＃39;
)
app.scripts.config.serve_locally &＃61; False

(3) 本地文件(自动引入)

在根目录创建assets文件夹&＃xff1a;

# 可以改这个设置
app.config.assets_folder &＃61; &＃39;assets&＃39;

A、里面的 CSS/JS 文件会自动引入

B、IMG 图片需要这样加载html.Img(src&＃61;&＃39;/assets/image.png&＃39;)&＃xff1a;

app.py
- assets/|-- typography.css|-- header.css|-- custom-script.js|-- image.png

6、路由


# ------------ 先定义 dcc.Location &＃xff0c;它的 pathname 属性会实时记录当前 url 的值 ------------dcc.Location(id&＃61;&＃39;url&＃39;, refresh&＃61;False), # 没有任何显示作用# ------------ 改变 url ------------# 会刷新页面
dcc.Link(&＃39;Navigate to "/"&＃39;, href&＃61;&＃39;/&＃39;),
dcc.Link(&＃39;Navigate to "/page-2"&＃39;, href&＃61;&＃39;/page-2&＃39;),# 不会刷新页面
html.A(href&＃61;&＃39;/page-3&＃39;,children&＃61;&＃39;Navigate to "/page-3"&＃39;),# ------------ 改变 url 的 回调 ------------&＃64;app.callback(dash.dependencies.Output(&＃39;page-content&＃39;, &＃39;children&＃39;),[dash.dependencies.Input(&＃39;url&＃39;, &＃39;pathname&＃39;)])
def display_page(pathname):return html.Div([html.H3(&＃39;You are on page {}&＃39;.format(pathname))])

构建多页面应用程序

略

注意事项 (坑)

如果我们通过不同的 url去渲染不同的页面的话&＃xff0c;会碰到一个问题&＃xff0c;就是我们可能会率先定义了回调&＃xff0c;而回掉中的组件暂时还没渲染到app.layout中&＃xff0c;因此Dash会引发异常以警告我们可能做错了。在这种情况下&＃xff0c;我们可以通过设置忽略该异常。即&＃xff1a;

app.config.suppress_callback_exceptions &＃61; True

7、Auth

&＃xff08;1&＃xff09;HTTP Basic Auth

pip install dash-auth

import dash_auth# Keep this out of source code repository - save in a file or a database
VALID_USERNAME_PASSWORD_PAIRS &＃61; [[&＃39;hello&＃39;, &＃39;world&＃39;]
]
auth &＃61; dash_auth.BasicAuth(app,VALID_USERNAME_PASSWORD_PAIRS
)app.scripts.config.serve_locally &＃61; True

&＃xff08;2&＃xff09;Plotly OAuth (需要付费)

略

8、部署

(1) 用 内嵌

(2)Flask 嵌入 Dash

略

(3)Dash 嵌入 Flask

略

延展知识

什么是 WSGI&＃xff1f;

WSGI是仅针对 python 的 Web服务器网关接口&＃xff08;Python Web Server Gateway Interface&＃xff09;规范。

注意&＃xff0c;只是规范&＃xff0c;是 web服务器和 web应用 之间的接口规范。

WSGI 跟 CGI 的区别&＃xff1f;

CGI 是通用网关接口的规范&＃xff0c;并不限于 Python 语言。虽然早已过时&＃xff0c;后来分别诞生了 python 领域的 WSGI 和 php 的 FastCGI&＃xff08;PHP-FPM&＃xff09;等。

python 的 web 框架都要遵循这个规范&＃xff0c;比如Flask内置的 wsgiref 或第三方的 Gunicorn 。 但前者 wsgiref 性能低下&＃xff0c;所以推荐部署时选择 flask&＃43;Gunicorn&＃43;nginx 方案。

gunicorn --workers 6 --threads 2 app:server

—workers 指定进程数

—threads 指定线程数

参考资料

https://dash.plot.ly/