Dash 簡介

Dash是一個用于構建Web應用程序的Python數據可視化庫。它基于Python Web框架 Flask 以及Javascript繪圖庫 Plotly.js 和用于構建用戶界面的Javascript庫 React.js ，所以它非常適合用于構建后端基于Flask，前端數據可視化的Web網頁。因為Dash應用程序可以在Web瀏覽器中顯示，所以可以將這些Dash應用程序部署到服務器，通過URL共享。Dash應用程序由兩部分組成，第一部分是 布局（Layout） ，該部分描述了應用程序的設計樣式，用來展示數據以及引導用戶使用；第二部分描述了應用程序的 交互性 。

下面展示一個Demo
###Demo簡介
使用Dash數據可視化NBA2018-2019常規賽季得分榜前三十各項數據，查看球員得分折線圖、球員得分條形圖，來分析NBA各大球星的得分趨勢，得分值集中范圍，以及得分落差。查看得分命中率和三分命中率散點圖，來分析各大球星的投籃能力，得分能力。

第一步，準備數據

虎撲官網爬取NBA常規賽得分榜前三十球員的相關數據（姓名、球隊、得分、得分命中率、三分命中率、罰球命中率）
代碼如下：

            
              import requests
from lxml import etree

url = 'https://nba.hupu.com/stats/players'

response = requests.get(url).text
html = etree.HTML(response)

result = []

for i in range(2,32):
    cur = []
    # 姓名數據解析
    name = html.xpath("http://table[@class='players_table']/tbody/tr[{}]/td[2]/a/text()".format(i))
    # 球隊數據解析
    team = html.xpath("http://table[@class='players_table']/tbody/tr[{}]/td[3]/a/text()".format(i))
    # 得分數據解析
    core = html.xpath("http://table[@class='players_table']/tbody/tr[{}]/td[4]/text()".format(i))
    # 得分命中率數據解析
    shooting = html.xpath("http://table[@class='players_table']/tbody/tr[{}]/td[6]/text()".format(i))
    # 三分命中率數據解析
    threeshooting = html.xpath("http://table[@class='players_table']/tbody/tr[{}]/td[8]/text()".format(i))
    # 罰球命中率數據解析
    freeshooting = html.xpath("http://table[@class='players_table']/tbody/tr[{}]/td[10]/text()".format(i))
    cur.append(name[0])
    cur.append(team[0])
    cur.append(core[0])
    cur.append(shooting[0])
    cur.append(threeshooting[0])
    cur.append(freeshooting[0])
    result.append(cur)

            
          

得到如下數據

            
              players = [['詹姆斯-哈登', '火箭', '36.10', '44.2%', '36.8%', '87.9%'],
           ['保羅-喬治', '快船', '28.00', '43.8%', '38.6%', '83.9%'],
           ['揚尼斯-阿德托昆博', '雄鹿', '27.70', '57.8%', '25.6%', '72.9%'],
           ['喬爾-恩比德', '76人', '27.50', '48.4%', '30%', '80.4%'],
           ['斯蒂芬-庫里', '勇士', '27.30', '47.2%', '43.7%', '91.6%'],
           ['德文-布克', '太陽', '26.60', '46.7%', '32.6%', '86.6%'],
           ['科懷-倫納德', '快船', '26.60', '49.6%', '37.1%', '85.4%'],
           ['凱文-杜蘭特', '籃網', '26.00', '52.1%', '35.3%', '88.5%'],
           ['達米安-利拉德', '開拓者', '25.80', '44.4%', '36.9%', '91.2%'],
           ['肯巴-沃克', '凱爾特人', '25.60', '43.4%', '35.6%', '84.4%'],
           ['布拉德利-比爾', '奇才', '25.60', '47.5%', '35.1%', '80.8%'],
           ['布雷克-格里芬', '活塞', '24.50', '46.2%', '36.2%', '75.3%'],
           ['卡爾-安東尼-唐斯', '森林狼', '24.40', '51.8%', '40%', '83.6%'],
           ['多諾萬-米切爾', '爵士', '23.80', '43.2%', '36.2%', '80.6%'],
           ['凱里-歐文', '籃網', '23.80', '48.7%', '40.1%', '87.3%'],
           ['扎克-拉文', '公牛', '23.70', '46.7%', '37.4%', '83.2%'],
           ['拉塞爾-威斯布魯克', '火箭', '22.90', '42.8%', '29%', '65.6%'],
           ['克萊-湯普森', '勇士', '21.50', '46.7%', '40.2%', '81.6%'],
           ['朱利葉斯-蘭德爾', '尼克斯', '21.40', '52.4%', '34.4%', '73.1%'],
           ['拉馬庫斯-阿爾德里奇', '馬刺', '21.30', '51.9%', '23.8%', '84.7%'],
           ['朱-霍勒迪', '鵜鶘', '21.20', '47.2%', '32.5%', '76.8%'],
           ['德馬爾-德羅贊', '馬刺', '21.20', '48.1%', '15.6%', '83%'],
           ['盧卡-東契奇', '獨行俠', '21.20', '42.7%', '32.7%', '71.3%'],
           ['邁克-康利', '爵士', '21.10', '43.8%', '36.4%', '84.5%'],
           ['丹吉洛-拉塞爾', '勇士', '21.10', '43.4%', '36.9%', '78%'],
           ['CJ-麥科勒姆', '開拓者', '21.00', '45.9%', '37.5%', '82.8%'],
           ['尼古拉-武切維奇', '魔術', '20.80', '51.8%', '36.4%', '78.9%'],
           ['巴迪-希爾德', '國王', '20.70', '45.8%', '42.7%', '88.6%'],
           ['尼古拉-約基奇', '掘金', '20.10', '51.1%', '30.7%', '82.1%'],
           ['路易斯-威廉姆斯', '快船', '20.00', '42.5%', '36.1%', '87.6%']
           ]

            
          

第二步，對數據可視化后臺代碼編寫

            
              external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    # 指定圖的id
    dcc.Graph(id = 'graph-with-slider'),
    # 定義滑塊的各項屬性
    dcc.Slider(
        id = 'class-slider',
        min = 1,
        max = 4,
        value = 2,
        marks = {'1':'得分條形圖','2':'命中率條形圖','3':'得分折線圖','4':'三分命中率散點圖'},
        step = None
    )
])
# 定義回調函數，使用‘@app.callback()'參數裝飾器來裝飾該回調函數，輸出綁定圖id，輸入綁定滑塊值
@app.callback(
    Output('graph-with-slider', 'figure'),
    [Input('class-slider','value')]
)
def update_output_div(input_value):
    # 當滑塊滑至1時，即輸入值為1，返回得分條形圖
    if input_value == 1:
        fig1 = dict(
            data=[{'x': [i+1], 'y': [float(players[i][2])], 'type': 'bar', 'name': '{}'.format(players[i][0])} for i in range(len(players))],
            layout = dict(title = 'NBA2018-2019賽季常規賽得分榜前十各項數據比較')
            )
        return fig1
    # 當滑塊滑至3，即輸入值為3時，返回球員得分折線圖
    if input_value == 3:
        x = []
        y = []
        for player in players:
            x.append(player[0])
            y.append(player[2])
        fig2 = dict(
            data=[
                {'x':x,'y':y,'type':'Scatter','name':'Core'}
                    ],
                    layout ={
            'title': '球員得分折線圖'
        }
        )
        return fig2
    # 當滑塊滑至2時，即輸入值為2，返回命中率條形圖
    if input_value == 2:
        fig3 = dict(
            data=[

                {'x':[players[i][0]],'y':[float(players[i][3][0:4])],'type':'bar','name':'{}'.format(players[i][0])}for i in range(len(players))


            ],
            layout=dict(title='球員命中率條形圖')
        )
        return fig3
    # 當滑塊滑至4時，即輸入值為4，返回得分命中率與三命中率散點圖
    if input_value==4:
        x = []
        y = []
        team = []
        for player in players:
            x.append(float(player[3][0:4]))
            if len(player[4])==5:
                y.append(float(player[4][0:3]))
            else:
                y.append(float(player[4][0:2]))
            team.append(player[1])
        fig4=dict(
            data = [
                go.Scatter(
                    x = [x[i]],
                    y = [y[i]],
                    text = team,
                    name = players[i][0],
                    mode='markers',
                    opacity=0.8,
                    marker=dict(size=15, line=dict(width=0.5, color='white'))
                )for i in range(len(players))
            ],
            layout=go.Layout(

                xaxis=dict(type='log', title='得分命中率'),
                yaxis=dict(title='三分命中率', range=[10, 50]),
                margin=dict(l=40, b=40, t=10, r=10),
                hovermode='closest',
        title = '球員得分命中率與三分命中率',
            )
            )


        return fig4
if __name__ == '__main__':
    # 開啟服務，指定端口號為7000
    app.run_server(port=7000)

            
          

上述代碼即定義一個dash應用程序，通過回調函數來控制不同圖的展示

4，應用程序展示

當滑塊滑至1時，得分條形圖展示
得到下圖

當滑塊滑至2時，命中率條形圖展示

當滑塊滑至3時，得分折線圖展示

當滑塊滑至4時，得分命中率與三分命中率散點圖展示