概述
Dash 是一个 Python 库，脱胎于 Plotly，可以很方便构建可交互的数据展示 Web 应用。
快速入门
安装
pip install dash
基本结构
一个 Hello World 示例，可以看到 dash app 是如何创建的：
from dash import Dash, html
app = Dash()
app.layout = [html.Div(children='Hello World')]
if __name__ == '__main__':
app.run(debug=True)
可见，
app = Dash()创建一个 app 实例app.run()运行这个 app 实例app.layout列表可以进行赋值，能直接将 html 元素放进去
要自定义页面元素，往 app.layout 列表塞东西即可。
Table 和 Graph
假设现在有一个 pandas 表格，
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
可以通过 dash_table.DataTable 和 doc.Graph 绘制表格和柱状图。
from dash import dash_table, dcc
import plotly.express as px
···
app.layout = [
···
dash_table.DataTable(data=df.to_dict('records'), page_size=10),
dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
]
Callback 控制
单选框 dcc.RadioItems。需要传入一个独一无二的 id。
dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'], value='lifeExp', id='controls-and-radio-item')
目标是给这个单选框绑一个 Callback，控制柱状图的显示。柱状图控件也要传入 id。
dcc.Graph(figure={}, id='controls-and-graph')
Callback 使用修饰器 callback 进行定义。修饰器会很直观地定义：
- 用哪个
id的控件的元素作为输入 - 对哪个
id的控件的元素进行输出
from dash import callback, Output, Input
@callback(
Output(component_id='controls-and-graph', component_property='figure'),
Input(component_id='controls-and-radio-item', component_property='value'),
)
def update_graph(col_chosen):
fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
return fig
不需要额外的绑定，给函数写好 callback 修饰器即可。
一些常用操作
这一节会省略 import 操作。
借助 Div 避免贴边
dash.html.Div 是 html5 <div> 的封装，可以传入 style 参数。
可以不再向 app.layout 传入 List，而是传入一个 html.Div 对象。所需元素放到省略号内就行。
app.layout = html.Div(
[
···
],
style={
'margin': 'auto',
'max-width': '80%',
},
)
Markdown
直接写入 Markdown 语法文段：
dcc.Markdown(
'''
# My first try
'''
)
结合 html.Div 使用可以避免贴住左边。
显示图片
本节参考。
第一种方法，使用 html5 <img> 的封装 html.Img。
# 传入图片路径
image_path = 'assets/my-image.png'
html.Img(src=image_path)
# 或者使用 base64
import base64
image_path = 'assets/my-image.png'
def b64_image(image_filename):
with open(image_filename, 'rb') as f:
image = f.read()
return 'data:image/png;base64,' + base64.b64encode(image).decode('utf-8')
html.Img(src=b64_image(image_path))
第二种方法，借助 plotly.express。优势是可以传入 numpy 矩阵。
dcc.Graph(
figure=px.imshow(
cv2.imread("test.jpg",)[..., [2, 1, 0]] # BGR -> RGB
)
)
cv2 读取的通道顺序默认是 BGR。
from PIL import Image
dcc.Graph(
figure=px.imshow(Image.open("test,jpg"))
)
高级自定义
悬停文本自定义
参考来源。
使用 .update_traces() 设置 hovertemplate，自定义节点的悬停文本。
import plotly.express as px
fig = px.scatter(df_2007, x="gdpPercap", y="lifeExp", log_x=True, color='continent')
fig.update_traces(hovertemplate='GDP: %{x} <br>Life Expectancy: %{y}')
fig.update_traces(hovertemplate=None, selector={'name':'Europe'}) # revert to default hover