使用 Dash 库构建可交互的数据展示 Web 应用

概述#

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.DataTabledoc.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

作者:chirp

出处:https://www.cnblogs.com/chirp/p/18225306

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   倒地  阅读(138)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示