「 作為數據分析的重要一環，把得到的數據或者分析結果以圖表的方式展示，是一種直觀、優雅的方式。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')是相同的。此外，它還可以包含字符串，數字，單個組件或者組件列表。
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庫生成高級別的組件，如控制項和圖形。
收錄了機器學習大數據的全套學習資料，在公眾號回復AI即可獲得！
如果喜歡我的文章，那就關注我吧！
萬分感謝！