- 一、Dash简介
- 二、Dash及主题框架安装
- 2.1 Dash安装
- 2.2 Dash Bootstrap Components安装
- 三、Dash布局实例（一）
- 3.1 实例1：柱状图
视频讲解：
【Python百日基础系列】21 Dash安装与布局实例1
一、Dash简介Dash是一个用于构建Web应用程序的高效Python框架。
Dash写在Flask，Plotly.js和React.js之上，在纯Python中，使用高度自定义的用户界面，构建数据可视化应用程序。
它特别适合使用Python进行数据分析的人。
Dash官网：https://dash.plotly.com
Dash主题框架（Dash Bootstrap Components）官网：
http://dash-bootstrap-components.opensource.faculty.ai/
pip install dash -i https://mirror.baidu.com/pypi/simple
安装的包还是挺多的
(py_100) PS E:python_100> pip install dash -i https://mirror.baidu.com/pypi/simple
Looking in indexes: https://mirror.baidu.com/pypi/simple
Collecting dash
Downloading https://mirror.baidu.com/pypi/packages/96/3f/f287d7a0084460e41abb636694a9dc13d030733687d944256fccdbac2ff8/dash-2.0.
0-py3-none-any.whl (7.3 MB)
|████████████████████████████████| 7.3 MB 2.2 MB/s
Collecting Flask>=1.0.4
Downloading https://mirror.baidu.com/pypi/packages/8f/b6/b4fdcb6d01ee20f9cfe81dcf9d3cd6c2f874b996f186f1c0b898c4a59c04/Flask-2.0
.2-py3-none-any.whl (95 kB)
|████████████████████████████████| 95 kB 1.9 MB/s
Collecting plotly>=5.0.0
Downloading https://mirror.baidu.com/pypi/packages/68/b2/7c7d111affebb281b1085680db7358f6204920bb5574e9e84db05c530688/plotly-5.
3.1-py2.py3-none-any.whl (23.9 MB)
|████████████████████████████████| 23.9 MB 6.4 MB/s
Collecting dash-core-components==2.0.0
Downloading https://mirror.baidu.com/pypi/packages/41/55/ad4a2cf9b7d4134779bd8d3a7e5b5f8cc757f421809e07c3e73bb374fdd7/dash_core
_components-2.0.0.tar.gz (3.4 kB)
Preparing metadata (setup.py) ... done
Collecting flask-compress
Downloading https://mirror.baidu.com/pypi/packages/75/fa/a3c96f3f367ad1d6532fa8394c9a6f5879513868207096f6b41f4168b342/Flask_Com
press-1.10.1-py3-none-any.whl (7.9 kB)
Collecting dash-table==5.0.0
Downloading https://mirror.baidu.com/pypi/packages/3a/81/34983fa0c67125d7fff9d55e5d1a065127bde7ca49ca32d04dedd55f9f35/dash_tabl
e-5.0.0.tar.gz (3.4 kB)
Preparing metadata (setup.py) ... done
Collecting dash-html-components==2.0.0
Downloading https://mirror.baidu.com/pypi/packages/14/c6/957d5e83b620473eb3c8557a253fb01c6a817b10ca43d3ff9d31796f32a6/dash_html
_components-2.0.0.tar.gz (3.8 kB)
Preparing metadata (setup.py) ... done
Collecting Werkzeug>=2.0
Downloading https://mirror.baidu.com/pypi/packages/1e/73/51137805d1b8d97367a8a77cae4a792af14bb7ce58fbd071af294c740cf0/Werkzeug-
2.0.2-py3-none-any.whl (288 kB)
|████████████████████████████████| 288 kB 6.4 MB/s
Collecting Jinja2>=3.0
Downloading https://mirror.baidu.com/pypi/packages/94/42/d8bca8e99789bcc35dfa9b03acaa8b518720d6e060163745bc2bf2ead842/Jinja2-3.
0.2-py3-none-any.whl (133 kB)
|████████████████████████████████| 133 kB ...
Collecting itsdangerous>=2.0
Downloading https://mirror.baidu.com/pypi/packages/9c/96/26f935afba9cd6140216da5add223a0c465b99d0f112b68a4ca426441019/itsdanger
ous-2.0.1-py3-none-any.whl (18 kB)
Collecting click>=7.1.2
Downloading https://mirror.baidu.com/pypi/packages/48/58/c8aa6a8e62cc75f39fee1092c45d6b6ba684122697d7ce7d53f64f98a129/click-8.0
.3-py3-none-any.whl (97 kB)
|████████████████████████████████| 97 kB ...
Collecting tenacity>=6.2.0
Downloading https://mirror.baidu.com/pypi/packages/f2/a5/f86bc8d67c979020438c8559cc70cfe3a1643fd160d35e09c9cca6a09189/tenacity-
8.0.1-py3-none-any.whl (24 kB)
Requirement already satisfied: six in e:python_100py_100libsite-packages (from plotly>=5.0.0->dash) (1.16.0)
Collecting brotli
Downloading https://mirror.baidu.com/pypi/packages/6b/11/7d28cd3a5492fed09159e9b37613fdcec7655d93dec664b79d4bb4bb67b8/Brotli-1.
0.9-cp310-cp310-win_amd64.whl (383 kB)
|████████████████████████████████| 383 kB 409 kB/s
Collecting colorama
Downloading https://mirror.baidu.com/pypi/packages/44/98/5b86278fbbf250d239ae0ecb724f8572af1c91f4a11edf4d36a206189440/colorama-
0.4.4-py2.py3-none-any.whl (16 kB)
Collecting MarkupSafe>=2.0
Downloading https://mirror.baidu.com/pypi/packages/93/28/d42b954fb9189cf4b78b0b0a025cff9b2583f93b37d1a345768ade29e5dd/MarkupSaf
e-2.0.1-cp310-cp310-win_amd64.whl (15 kB)
Using legacy 'setup.py install' for dash-core-components, since package 'wheel' is not installed.
Using legacy 'setup.py install' for dash-html-components, since package 'wheel' is not installed.
Using legacy 'setup.py install' for dash-table, since package 'wheel' is not installed.
Installing collected packages: MarkupSafe, colorama, Werkzeug, Jinja2, itsdangerous, click, tenacity, Flask, brotli, plotly, flas
k-compress, dash-table, dash-html-components, dash-core-components, dash
Running setup.py install for dash-table ... done
Running setup.py install for dash-html-components ... done
Running setup.py install for dash-core-components ... done
Successfully installed Flask-2.0.2 Jinja2-3.0.2 MarkupSafe-2.0.1 Werkzeug-2.0.2 brotli-1.0.9 click-8.0.3 colorama-0.4.4 dash-2.0.
0 dash-core-components-2.0.0 dash-html-components-2.0.0 dash-table-5.0.0 flask-compress-1.10.1 itsdangerous-2.0.1 plotly-5.3.1 te
nacity-8.0.1
2.2 Dash Bootstrap Components安装
pip install dash-bootstrap-components -i https://mirror.baidu.com/pypi/simple
安装过程中会检测Dash及其组件和依赖是否安装，如果没有安装会一并安装。
(py_100) PS E:python_100> pip install dash-bootstrap-components -i https://mirror.
baidu.com/pypi/simple
Looking in indexes: https://mirror.baidu.com/pypi/simple
Collecting dash-bootstrap-components
Downloading https://mirror.baidu.com/pypi/packages/1a/50/0f8452fe6b511498e52a3d258fd7367d24c8d6096860b5d768e0bab42aad/dash_bootstrap_components-1.0.0-py3-n
one-any.whl (207 kB)
|████████████████████████████████| 207 kB 6.4 MB/s
Requirement already satisfied: dash>=2.0.0 in e:python_100py_100libsite-packages (from dash-bootstrap-components) (2.0.0)
Requirement already satisfied: dash-html-components==2.0.0 in e:python_100py_100libsite-packages (from dash>=2.0.0->dash-bootstrap-components) (2.0.0)
Requirement already satisfied: dash-core-components==2.0.0 in e:python_100py_100libsite-packages (from dash>=2.0.0->dash-bootstrap-components) (2.0.0)
Requirement already satisfied: dash-table==5.0.0 in e:python_100py_100libsite-packages (from dash>=2.0.0->dash-bootstrap-components) (5.0.0)
Requirement already satisfied: plotly>=5.0.0 in e:python_100py_100libsite-packages (from dash>=2.0.0->dash-bootstrap-components) (5.3.1)
Requirement already satisfied: Flask>=1.0.4 in e:python_100py_100libsite-packages (from dash>=2.0.0->dash-bootstrap-components) (2.0.2)
Requirement already satisfied: flask-compress in e:python_100py_100libsite-packages (from dash>=2.0.0->dash-bootstrap-components) (1.10.1)
Requirement already satisfied: Jinja2>=3.0 in e:python_100py_100libsite-packages (from Flask>=1.0.4->dash>=2.0.0->dash-bootstrap-components) (3.0.2)
Requirement already satisfied: itsdangerous>=2.0 in e:python_100py_100libsite-packages (from Flask>=1.0.4->dash>=2.0.0->dash-bootstrap-components) (2.0.1
)
Requirement already satisfied: Werkzeug>=2.0 in e:python_100py_100libsite-packages (from Flask>=1.0.4->dash>=2.0.0->dash-bootstrap-components) (2.0.2)
Requirement already satisfied: click>=7.1.2 in e:python_100py_100libsite-packages (from Flask>=1.0.4->dash>=2.0.0->dash-bootstrap-components) (8.0.3)
Requirement already satisfied: six in e:python_100py_100libsite-packages (from plotly>=5.0.0->dash>=2.0.0->dash-bootstrap-components) (1.16.0)
Requirement already satisfied: tenacity>=6.2.0 in e:python_100py_100libsite-packages (from plotly>=5.0.0->dash>=2.0.0->dash-bootstrap-components) (8.0.1)
Requirement already satisfied: brotli in e:python_100py_100libsite-packages (from flask-compress->dash>=2.0.0->dash-bootstrap-components) (1.0.9)
Requirement already satisfied: colorama in e:python_100py_100libsite-packages (from click>=7.1.2->Flask>=1.0.4->dash>=2.0.0->dash-bootstrap-components) (
0.4.4)
Requirement already satisfied: MarkupSafe>=2.0 in e:python_100py_100libsite-packages (from Jinja2>=3.0->Flask>=1.0.4->dash>=2.0.0->dash-bootstrap-compone
nts) (2.0.1)
Installing collected packages: dash-bootstrap-components
Successfully installed dash-bootstrap-components-1.0.0
三、Dash布局实例（一）
Dash应用程序由两部分组成。第一部分是布局(layout)，描述应用程序的设计样式；第二部分描述了应用程序的交互性。
Dash为应用程序的所有可视化组件，提供了Python类，在dash_core_components（dcc）库和dash_html_components（html）库中，进行组件的维护。
以下实例代码都是复制借鉴官网实例来的。
说明部分借鉴了简书一篇优秀文章：
作者：惑也
链接：https://www.jianshu.com/p/ca1b2ae4883e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
# _*_ coding: UTF-8 _*_
# @Time:2021/10/20 21:12
# @Author:岳涛@心馨电脑
# @File:Day21 - Dash基础.py
# @Software:PyCharm
import dash
from dash import dcc
from dash import html
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
df = pd.Dataframe({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for your data.
'''),
dcc.Graph(
id='example-graph',
figure=fig
)
])
if __name__ == '__main__':
app.run_server(debug=True)
说明 布局 layout 由 html.Div 和 dcc.Graph 这样的组件树组成； Dash是 声明式 的，通过关键字参数描述组件。即Dash主要通过属性描述应用，如 style、className、id等； dash_html_components 库为每个HTML标签都提供了对应的组件。本例中：html.H1(children='Hello Dash')可以生成你好，Dash
这样的HTML语句。并非所有组件都使用纯HTML语言； dash_core_components 这种交互式高阶组件库，是由Javascript、HTML和CSS编写，并由React.js库生成，用于设置互动性图表组件，如控件、图形等，其语法类似Plotly； 按照惯例，children 始终是第一个属性，可以省略，即 html.H1(children='Hello Dash') 和 html.H1('Hello Dash')相同，本例中，声明了3次，实际上都可以忽略。另外，它还可以包含字符串、数字、单个组件或组件列表。
补充视频代码：
import plotly.express as px
import pandas as pd
import dash
from dash import dcc
from dash import html
df = pd.read_excel('fruit.xlsx', sheet_name='Sheet2')
df.columns = ['fruit', 'year', 'amount']
fig = px.bar(df, x='fruit', y='amount', color='year', barmode='group')
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1('2017-2019年水果销量图'),
html.Div('常用水果'),
dcc.Graph(figure=fig),
])
if __name__ == ('__main__'):
app.run_server(debug=True)
