“ 作为数据分析的重要一环，把得到的数据或者分析结果以图表的方式展示，是一种直观、优雅的方式。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库生成高级别的组件，如控件和图形。
