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参数,见下面例子。
代码 | 样式 |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
实际上,参数style对应的就是css文件,也可以通过写css文件对元素样式进行修改。
在Container()
之内,我们就可以按照bootstrap
的网格系统进行内容的排布:行(Row)嵌套列(Col),再向列嵌套各种部件。Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕尺寸的增加,系统会自动分为