“ 作为数据分析的重要一环，把得到的数据或者分析结果以图表的方式展示，是一种直观、优雅的方式。Dash是基于Flask的Python可视化工具，我在学习之余尝试着翻译官方的Tutorial，有不足之处，还望不吝指正”

Dash layout

Dash应用程序由两部分组成：第一部分是Dash应用程序的“layout”，它描述了应用程序的外观。第二部分描述了应用程序的交互性。

01.Dash 安装

pip install dash==0.34.0

pip install dash-html-components==0.13.4

pip install dash-core-components==0.41.0

pip install dash-table==3.1.11

01.Dash layout

Dash为应用程序的所有可视组件提供Python类，我们在dash_core_components和dash_html_components库中维护了一组组件，同时我们也可以使用JavaScript和React.js构建自己的组件。

创建文件app.py

运行这个app

$ python app.py

...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

在浏览器中访问http:127.0.0.1:8050/，可以看到如下页面：

我们注意到：

1. 布局由一个组件树组成，如html.Div和dcc.Graph

2. dash_html_components库为每一个HTML标签都提供一个组件。html.H1(children='Hello Dash')组件在我们的应用程序中产生了一个<h1>Hello Dash</h1>HTML元素。

3. 并不是所有的组件都是纯HTML，dash_core_components描述了更搞级别的组件。这些组件是交互式的，并通过JavaScript、HTML和CSS等生成。

4. 每个组件都完全通过关键字属性来描述。Dash是声明性的：你将主要通过这些属性来描述应用程序。

5. children属性是特殊的。按照惯例，它始终都是第一个属性，这意味着你可以省略它：html.H1(children='Hello Dash')与 html.H1('HelloDash')是相同的。此外，它还可以包含字符串，数字，单个组件或者组件列表。

02.关于HTML更多信息

dash_html_components库包含每个HTML标签的组件类以及所有HTML参数的关键字参数。

我们来通过修改组件的内联样式来自定义应用程序中的文本：

在例子中，我们通过style属性修改了html.Div和html.H1的内联样式。

html.H1('Hello Dash', style={'textAlign':'center', 'color': '#7FDBFF'})在Dash程序中呈现为<h1 style="text-align: center; color: #7FDBFF">HelloDash</h1>。

dash_html_components和HTML属性有几点重要的不同：

1. 在HTML中，style属性是以分号分隔的字符串。在Dash中，你可以使用一个字典。

2. style字典里的键值是cameCase（驼峰样式）的，不是 text-align, 而是 textAlign。

3. HTML类属性是Dash中的className。

4. HTML标签的子项是通过children关键字参数指定的。按照惯例，这始终是第一个参数，所以通常被省略。

除此之外，你还可以在Python上下文中使用所有可用的HTML属性和标签。

03.可复用组件

通过在Python中编写标记，我们可以创建复杂的可复用组件，如表，而无需切换上下文或语言。

一个例子，从Pandas数据集中生成表格:

04. 关于可视化的更多信息

dash_core_components库包含一个名为Graph的组件。Graph使用开源plotly.js图形库呈现交互式数据可视化。plotly.js支持超过35种图表类型，并在vector-quality SVG和high-performance WebGL中呈现图表。

同时，dash_core_components.Graph组件中的figure参数与plotly.js使用的图形参数是相同的。

一个例子，从Pandas数据集创建散点图：

05. Markdown

可以使用dash_core_components库中的Markdown组件来编写大量的文本块。

06. 核心组件

dash_core_components库包含一组更高级别的组件，如下拉列表，图形等。

与所有Dash组件一样，它们完全以声明的方式描述。

下面是一些可用的组件

可以使用help来查看更多的组件用法。

>>> help(dcc.Dropdown)

class Dropdown(dash.development.base_component.Component)

|  A Dropdown component.

|  Dropdown is an interactive dropdown element for selecting one or more

|  items.

|  The values and labels of the dropdown items are specified in the `options`

|  property and the selected item(s) are specified with the `value` property.

|

|  Use a dropdown when you have many options (more than 5) or when you are

|  constrained for space. Otherwise, you can use RadioItems or a Checklist,

|  which have the benefit of showing the users all of the items at once.

|

|  Keyword arguments:

|  - id (string; optional)

|  - className (string; optional)

|  - disabled (boolean; optional): If true, the option is disabled

|  - multi (boolean; optional): If true, the user can select multiple values

|  - options (list; optional)

|  - placeholder (string; optional): The grey, default text shown when no option is selected

|  - value (string | list; optional): The value of the input. If `multi` is false (the default)

|  then value is just a string that corresponds to the values

|  provided in the `options` property. If `multi` is true, then

|  multiple values can be selected at once, and `value` is an

|  array of items with values corresponding to those in the

|  `options` prop.```

06. 综述

Dash应用程序的布局描述了应用程序的外观，布局是组件的分层树。

dash_html_components库为所有HTML标签提供类，同时关键字参数描述HTML属性，例如style，className和ID。

dash_core_components库生成高级别的组件，如控件和图形。