作者：Be_melting
項目4： 利用Dash Plotly實作資料圖表可視化
這個項目可以解決項目1中最後關于資料在網頁上如何顯示的問題。此外還有三個核心知識點需要掌握及了解。
（1）px子產品是幹什麼的以及如何使用；
（2）px對象如何與Dash并用；
（3）px與原來的繪圖方式go有何關系。
項目1中官網給出了express的導入方式：import plotly.express as px。具體更豐富的方法可以查閱官方網址：https://plotly.com/python/getting-started/。 頁面中間的部分就有介紹plotly與dash結合，示例代碼如下。
import dash
import dash_core_components as dcc #也可以from dash import dcc
import dash_html_components as html #也可以from dash import html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
app = dash.Dash(__name__)
app.layout = html.Div([
html.P("Color:"),
dcc.Dropdown(
id="dropdown",
options=[
{'label': x, 'value': x}
for x in ['Gold', 'MediumTurquoise', 'LightGreen']
],
value='Gold',
clearable=False,
),
dcc.Graph(id="graph"),
])
@app.callback(
Output("graph", "figure"),
[Input("dropdown", "value")])
def display_color(color):
fig = go.Figure(
data=go.Bar(y=[2, 3, 1], marker_color=color))
return fig
app.run_server(debug=True) 輸出結果如下。實作了根據下拉菜單中的選項對圖形的顯色的切換。
[1] 傳回到第一個核心知識，express進行可視化繪圖，而且可以和Dash進行合并，接下來就介紹其如何使用，建立一個py檔案，輸入如下代碼。
import plotly.express as px
fig = px.bar(x=["a", "b", "c"], y=[1, 3, 2])
fig.write_html('first_figure.html', auto_open=True) 輸出結果如下。繪制圖形的方式相對比較簡單，隻需要把對應x軸和y軸資料放置在清單中，其中的bar是繪制柱狀圖（也可以繪制散點圖scatter），最後面是将圖形寫入到本地檔案，自動打開。
[2] express與Dash并用。這裡以讀取資料檔案中的資料為例，擷取球員的身高和得分，通過繪制散點圖探究身高是否和得分有着關聯。px具體與dash結合需要使用dcc.Graph方法，最後在把這個圖形添加到html中的網頁布局中。
import pandas as pd
import dash
from dash import dcc
from dash import html
import plotly.express as px
app = dash.Dash() #建立Dash應用，進行初始化
df = pd.read_csv('all_seasons.csv') #讀取csv資料
height = df['player_height']· #擷取運動員身高一列
points = df['pts'] #擷取得分一列
fig = px.scatter(x = height,y= points) #将x和y對應的資料傳遞到scatter中
graph = dcc.Graph(figure=fig) #通過dcc.Graph方法，完成px與Dash結合
app.layout = html.Div(children=[ #最後就是将圖形添加到網頁html中
graph
])
app.run_server(debug=True) #運作Dash應用 儲存檔案後運作，重新整理網址：http://127.0.0.1:8050/ ，輸出結果如下。可以發現身高和得分并沒有必然的聯系，但是會有一個得分的黃金身高，處于中間分布的範圍内。
[3] px與原來的繪圖方式go有何關系。通過官網給出的示例代碼，可以發現裡面繪圖方式并不是用px，而是采用了go的方式。具體的差別在于代碼的複雜程度，px相當于大幅度的簡化了之前繪制的過程，直接指定繪制的圖形類型，然後直接傳入資料就可以繪制，而原來的繪制方法前面還需要套一個data, 再外一層又有一個go.Figure相對很複雜。
df = pd.read_csv('all_seasons.csv')
height = df['player_height']·
points = df['pts']
# 使用px進行繪制
import plotly.express as px
fig = px.scatter(x = height,y= points)
graph = dcc.Graph(figure=fig)
# 使用go進行繪制
import plotly.graph_objects as go
fig2 = go.Figure(
data = [
go.Scatter(
x = height,
y = points,
mode = 'makers'
)
]
)
graph2 = dcc.Graph(figure=fig2)
app.layout = html.Div(children=[
graph,
graph2
]) 儲存檔案後，重新整理網址：http://127.0.0.1:8050/ ，輸出結果如下。對比原來的go子產品進行繪制圖形，嵌套的資訊太多，而直接使用px繪制圖形十分簡潔明了。