【Python】Dash简单介绍

ddclare

已于 2024-11-19 15:49:35 修改

阅读量6.1k

点赞数 20

文章标签： python dash 开发语言

于 2024-09-19 14:45:37 首次发布

本文链接：https://blog.csdn.net/dududdu666666/article/details/142142486

版权

Dash是一个基于Flask、Poltly.js以及React.js的Python框架，由plotly公司开发，设计之初是为了帮助数据分析人员进行快速的数据可视化网页搭建。现时Dash已经是一个相当成熟的框架，拥有丰富的社区资源与生态。

1、简单介绍

由于Dash是基于Flask框架建立的，其运行方式与执行逻辑和Flask是大同小异的。但Flask需要自己处理前后端的连接，且对前端后端知识有一定的了解，这对数据人员来说并不友好。Dash则将前端后端集成在一起，只需写简单的回调就能实现交互功能。

1.1 安装

pip install dash

安装后即可构建一个Dash应用了！现在来创建一个小的Dash应用。

# app.py
from dash import Dash, html

app = Dash(__name__)
app.layout = [html.Div('Hello world!')]

if __name__ == '__main__':
    app.run_server()

可以看到终端返回了一些信息，Dash应用在本地主机上运行，端口默认8050。在run_server()设置参数port可更改端口，可设置debug=True切换debug模式。

开启debug模式后每修改一次代码后Dash应用会自动重启更新，遇上错误后中断当前应用。

# app.py
from dash import Dash, html

app = Dash(__name__)
app.layout = [html.Div('Hello world!')]

if __name__ == '__main__':
    app.run_server(debug=True)

开启debug模式后，Dash应用的右下方出现蓝色logo。展开logo会有三个按钮，第一个按钮展示Dash应用中的回调信息，包括回调关系、回调加载时间等；第二个按钮Errors反映的是程序错误信息，比如回调错误；第三个按钮Server则是显示当前Dash应用的运行状态，绿色表示正常运行，红色表示出错终止。

1.2 应用架构

Dash应用的架构如下：

+ dashProject/
   + asset/
      + css/
      + img/
      + js/
       • favicon.ico
   + callbacks/
   + models/
   + views/
    • app.py
    • server.py
   + pages/

文件夹assets存放前端文件，callbacks存放回调函数，models存放数据模型文件，views为视图文件， pages存放不同的页面文件。Dash自动读取相应的文件夹进行相应的操作，可以根据自己的实际需要对架构进行调整。

1.3 基本概念

Dash应用基本上是由两部分组成：布局(Layout)和回调(Callback)。布局负责页面的外观，回调则赋予了应用交互性。

1.3.1 布局

布局规定Dash页面的外观，规定哪一块区域具体放什么内容、怎么排版等。layout 由一棵“组件”树组成，利如 html.Div ，dcc.Graph。

app.layout = [
    html.Div('Hello world!'),
    html.Div('1'),
    html.Div('2'),
    html.Div('3'),
]

一个好看的网页往往通常需要编写css、js文件，但使用Dash元素的初衷不就是因为不熟悉不想写繁琐的前端代码吗，所以调用Dash的第三方拓展库dash_bootstrap_components就可以大大减少前端页面设计工作。dash-bootstrap-components不包含css，这是为了让您可以自由地选择任何的Bootstrap v5样式表，实现想要的外观。

import dash_bootstrap_components as dbc
import dash


app = dash.Dash(
    __name__,
    # 用于引入外部的css，有了这部分网页才有更多样的形式
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    # 可以填入css文件
    # external_stylesheets=['css/bootstrap.min.css'],
)

if __name__ == '__main__':
    app.run_server()

上面的准备工作完成以后，接下来开始学习构造页面布局。

Container、Row、Col

首先要了解的是组件Container，它是我们组织页面元素的容器。一个元素的尺寸和位置经常受其容器(Container)的影响。容器都被划分为四个区域，内容区(Content)、内边距区(Padding)、边框区(Margin)和外边框区(Border)。要修改Content、Padding、Margin、Border的样式，可设置style参数，见下面例子。