Dash是一个用于创建分析仪表板和数据可视化的Web框架。它帮助数据分析师部署仪表板，并将这些仪表板服务于主Web应用程序。Dash由以下三种技术构成：
1. Plotly.js - 用于创建美观的图表和不同的可视化效果。
2.Flask- 一个Web框架，用于提供仪表板作为Web服务请求。
3. React.js - 用于为仪表板提供用户界面。
不需要具备先前的Web开发知识即可使用Dash开发仪表板。通过Dash可以实现仪表板的快速开发。
让从创建一个新目录开始，并在其中创建一个Python虚拟环境。
打开命令提示符，并使用以下命令创建一个名为PracticeDashboard的新目录：
c:> mkdir PracticeDashboard && cd PracticeDashboard
c:>PracticeDashboard python -m venv venv
c:>PracticeDashboard venvScriptsactivate.bat
上述命令首先创建一个名为PracticeDashboard的目录，然后在该位置创建一个虚拟环境。最后一个命令激活虚拟环境。
虚拟环境是一个Python环境，其中安装了Python解释器、脚本和库。这些库与系统中安装的其他库隔离。这样做的好处是，系统中的任何版本变化都不会影响虚拟环境，因此可以独立运行多个虚拟环境，没有任何阻碍。因此，创建和激活单独的虚拟环境非常重要。
激活虚拟环境后，现在安装所需的库。
(venv)$ python -m pip install dash==1.13.3 pandas==1.0.5
安装了两个库：
1. Dash - Dash是由Plotly开发的开源Python库，根据MIT许可证免费提供，用于快速构建美观的仪表板。
2. Pandas - Pandas是一个用于数据操作的Python库。它作为另外两个库的包装器：matplotlib用于数据可视化，NumPy用于对数据集执行数学运算。
将使用股票交易数据集。可以简单地下载数据集，并将CSV文件保存在PracticeDashboard文件夹中。文件夹如下所示：
PracticeDashboard
|
|-----venv
|----indexData.csv
数据集包括全球股票交易所指数的价格。列包括ID、指数名称、观察日期、股票开盘价、收盘价、观察到的最高和最低价等。
第一步是初始化Dash应用程序。在项目目录中创建一个空文件app.py。复制以下代码：
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
data = pd.read_csv("indexData.csv")
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
data.sort_values("Date", inplace=True)
app = dash.Dash(__name__)
导入了四个库：
dash - 用于初始化Dash应用程序。
dash_core_components - 用于制作美观的图表和其他视觉组件，如选择器、下拉菜单、日期等。
dash_html_components - 包括用于设计仪表板的各种Html标签。
pandas - 用于对数据集执行数学运算和查询。
定义应用程序的布局，使用dcc组件。将使用app.layout属性。
app.layout = html.Div(
children=[
html.H1(children="股票交易分析"),
html.P(
children="分析每日指数的最高和最低价。",
),
# 省略其他代码...
]
)
最后，以下两行将帮助应用程序运行：
if __name__ == "__main__":
app.run_server(debug=True)
现在打开控制台，转到项目目录并运行以下命令：
python app.py
本地开发服务器在localhost:8050启动。
要使仪表板交互式，将添加一个日期范围选择器，以便图表随着日期范围自动变化。将在顶部添加一个Html日期选择器以选择日期范围。因此，app.layout更改为以下内容：
app.layout = html.Div(
children=[
html.H1(children="股票交易分析"),
html.P(
children="分析每日指数的开盘和收盘价。",
),
# 省略其他代码...
]
)
dcc组件的图表从仪表板的先前版本中更改。不需要figure组件，因为图表将从回调函数生成。更改后的代码如下所示：
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="open-price-chart", config={"displayModeBar": False},
),
className="card",
),
html.Div(
children=dcc.Graph(
id="close-price-chart", config={"displayModeBar": False},
),
className="card",
),
],
className="wrapper",
)
@app.callback(
[Output("open-price-chart", "figure"), Output("close-price-chart", "figure")],
[
Input("date-range", "start_date"),
Input("date-range", "end_date"),
],
)
def update_charts(start_date, end_date):
# 省略其他代码...
return open_price_chart_figure, close_price_chart_figure