[[382596]]

本文轉載自微信公眾號「python與大數據分析」，作者一只小小鳥鳥  。轉載本文請聯系python與大數據分析公眾號。 

Dash是基于Flask的Python可視化工具，嚴格說來由三個部分組成，首先是Flask提供了標準web環境，再次是plotly這個圖表可視化工具，最后是與dash相配套的html、圖表等交互式組件。本人也陸續試過pyechart，但就集成性和可視化而言，與dash還是有一定差距。

代碼示例

import dash --集成flask 
 
import dash_core_components as dcc --與圖表相關的核心組件 
 
import dash_html_components as html --與HTML交互相關的組件 
 
import plotly.graph_objects as go --plotly的底層組件 
 
import plotly.express as px --plotly的高階組件，同時提供了內置的數據集 
 
 
 
fig = go.Figure() 
 
fig = go.Figure(data=go.Bar(y=[2, 3, 1])) 
 
# fig.add_trace( ... ) 
 
# fig.update_layout( ... ) 
 
 
 
df = px.data.gapminder() 
 
df = px.data.gapminder().query("country=='China'") 
 
fig = px.line(df, x="year", y="lifeExp", title='人口增長率') 
 
 
 
app = dash.Dash() 
 
app.layout = html.Div([ 
 
dcc.Graph(figure=fig) 
 
]) 
 
 
 
app.run_server(debug=True, use_reloader=False) 
 
? 

Plotly Express是對 Plotly.py 的高級封裝，內置了大量實用、現代的繪圖模板，用戶只需調用簡單的API函數，即可快速生成漂亮的互動圖表，可滿足90%以上的應用場景。

plotly.express附帶了一些用于演示、教育和測試目的的內置數據集。

這些數據以CSV格式存儲在包的目錄下，以pandas類型獲取到數據，方便進行圖表功能測試。

1、gapminder():每一行代表一個國家在給定的年份GDP、人口增長等信息。包含1704行和以下列：

['country', 'continent', 'year', 'lifeExp', 'pop', 'gdpPercap', 'iso_alpha', 'iso_num']. 

2、tips():每行代表一張餐廳賬單。包含244行和以下列：

['total_bill', 'tip', 'sex', 'smoker', 'day', 'time', 'size']. 

3、iris():每行代表一朵花。包含150行和以下列：

['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species', 'species_id']. 

4、wind():每行表示一個基本方向上的風強度級別及其頻率。包含128行和以下列：

['direction', 'strength', 'frequency']. 

5、election():每一行代表2013年蒙特利爾市長選舉中一個選區的投票結果。包含58行和以下列：

['district', 'Coderre', 'Bergeron', 'Joly', 'total', 'winner', 'result', 'district_id']. 

6、election_geojson():每個功能代表2013年蒙特利爾市長選舉中的一個選區。

GeoJSON格式的“dict”，具有58個多邊形或多多邊形特征，其“id”是一個選區數字ID，其'district'屬性是ID和地區名稱。

7、carshare():每一行表示在蒙特利爾呆了一個月，區域中心附近的汽車共享服務的可用性。包含249行和以下列：

['centroid_lat', 'centroid_lon', 'car_hours', 'peak_hour']. 

8、stocks(indexed=False):這一廣泛數據集中的每一行代表2018/2019年6只科技股的收盤價。包含100行和以下列：

['date', 'GOOG', 'AAPL', 'AMZN', 'FB', 'NFLX', 'MSFT']. 

9、experiment(indexed=False):這個大數據集中的每一行代表100名模擬參與者在三個假設實驗中的結果，以及他們的性別和對照/治療組。包含100行和以下列：

['experiment_1', 'experiment_2', 'experiment_3', 'gender', 'group']. 

10、medals_wide(indexed=False):此數據集表示截至2020年前三名國家的奧運會短道速滑獎牌表。包含3行和以下列：

['nation', 'gold', 'silver', 'bronze']. 

11、medals_long(indexed=False):此數據集表示截至2020年前三名國家的奧運會短道速滑獎牌表。包含9行和以下列：

['nation', 'medal', 'count']. 

plotly.express提供了30多種標準圖表，用以簡化操作。

1、scatter：散點圖 在散點圖中，每行data_frame由2D空間中的符號標記表示;

2、scatter_3d：三維散點圖 在3D散點圖中，每行data_frame由3D空間中的符號標記表示;

3、scatter_polar：極坐標散點圖 在極坐標散點圖中，每行data_frame由極坐標中的符號標記表示;

4、scatter_ternary：三元散點圖 在三元散點圖中，每行data_frame由三元坐標中的符號標記表示;

5、scatter_mapbox：地圖散點圖 在Mapbox散點圖中，每一行data_frame都由Mapbox地圖上的符號標記表示;

6、scatter_geo：地理坐標散點圖 在地理散點圖中，每一行data_frame都由地圖上的符號標記表示;

7、line：線條圖 在2D線圖中，每行data_frame表示為2D空間中折線標記的頂點;

8、line_3d：三維線圖 在三維線圖中，每行數據框都表示為三維空間中多段線標記的頂點

9、line_polar：極坐標線條圖 在極線圖中，每行data_frame表示為極坐標中折線標記的頂點;

10、line_ternary：三元線條圖 在三元線圖中，每行data_frame表示為三元坐標中折線標記的頂點;

11、line_mapbox：地圖線條圖 在Mapbox線圖中，每一行data_frame表示為Mapbox地圖上折線標記的頂點;

12、line_geo：地理坐標線條圖 在地理線圖中，每一行data_frame表示為地圖上折線標記的頂點;

13、area：堆積區域圖 在堆積區域圖中，每行data_frame表示為2D空間中折線標記的頂點。連續折線之間的區域被填充;

14、bar：條形圖 在條形圖中，每行data_frame表示為矩形標記;

15、timeline：時間軸圖 在時間軸圖中，每一行數據框都表示為日期類型x軸上的矩形標記，從x開始到x結束。

16、bar_polar：極坐標條形圖 在極坐標條形圖中，每一行都data_frame表示為極坐標中的楔形標記;

17、violin：小提琴圖 在小提琴圖中，將data_frame每一行分組成一個曲線標記，以便可視化它們的分布;

18、box：箱形圖 在箱形圖中，data_frame的每一行被組合在一起成為盒須標記，以顯示它們的分布;

19、strip：長條圖 在長條圖中，每一行data_frame表示為類別中的抖動標記;

20、histogram：直方圖 在直方圖中，每一行data_frame被組合在一起成為矩形標記，以可視化該值的聚合函數histfunc(例如，計數或總和)的1D分布y(或者x，如果orientation是'h'時);

21、pie：餅圖 在餅圖中，數據幀的每一行表示為餅圖的扇區。

22、treemap：樹狀圖 樹狀圖將層次數據表示為嵌套的矩形扇區。

23、sunburst：圓環圖 圓環圖將層次數據表示為在同心環的多個級別上布置的扇區。

24、funnel：漏斗圖 在漏斗圖中，數據框的每一行表示為漏斗的矩形扇區。

25、funnel_area：漏斗區域圖 在漏斗區域圖中，每行數據框表示為漏斗的梯形扇區。

26、scatter_matrix：矩陣散點圖 在散點圖矩陣(或SPLOM)中，每行data_frame由多個符號標記表示，在2D散點圖的網格的每個單元格中有一個，其將每對dimensions彼此相對繪制;

27、parallel_coordinates：平行坐標圖 在平行坐標圖中，每行data_frame由折線標記表示，該折線標記穿過一組平行軸，每個平行軸對應一個平行軸 dimensions;

28、parallel_categories：并行類別圖 在并行類別(或平行集)圖中，每行data_frame與其他共享相同值的行組合，dimensions然后通過一組平行軸繪制為折線標記，每個平行軸對應一個dimensions;

29、choropleth：等高(值)區域地圖 在等值區域圖中，每行data_frame由地圖上的彩色區域標記表示;

30、choropleth_mapbox：在Mapbox choropleth地圖中，每一行的數據由Mapbox地圖上的一個彩色區域表示。

31、density_contour：密度等值線圖(雙變量分布) 在密度等值線圖中，行data_frame被組合在一起，成為輪廓標記，以可視化該值的聚合函數histfunc(例如：計數或總和)的2D分布z;

32、density_heatmap：密度熱力圖(雙變量分布) 在密度熱圖中，行data_frame被組合在一起，成為彩色矩形瓦片，以可視化該值的聚合函數histfunc(例如：計數或總和)的2D分布 z;

33、density_mapbox：Mapbox密度圖 在Mapbox密度圖中，每一行數據幀都會影響地圖上相應點周圍區域的顏色強度

plotly.graph_objects為底層組件，提供了figures, traces and layout等底層接口，以便進行靈活開發。

Figure 容器

Layout 布局

Simple Traces 簡單軌跡線

Distribution Traces 分布軌跡線

Finance Traces 財務軌跡線

Map Traces 地圖軌跡線

Specialized Traces 特殊軌跡線

dash_html_components庫包含每個HTML標簽的組件類以及所有HTML參數的關鍵字參數。

dash_html_components和HTML屬性有幾點重要的不同：

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

2. style字典里的鍵值是cameCase(駝峰樣式)的，不是 text-align, 而是 textAlign。

3. HTML類屬性是Dash中的className。

4. HTML標簽的子項是通過children關鍵字參數指定的。

dash_core_components庫包含一組更高級別的組件，如下拉列表，圖形等。

dash_html_components庫為所有HTML標簽提供類，同時關鍵字參數描述HTML屬性，例如style，className和ID。

dash_core_components庫生成高級別的組件，如控件和圖形。