Python可视化数据库Dash

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 etreeurl = '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("//table[@class='players_table']/tbody/tr[{}]/td[2]/a/text()".format(i))# 球队数据解析team = html.xpath("//table[@class='players_table']/tbody/tr[{}]/td[3]/a/text()".format(i))# 得分数据解析core = html.xpath("//table[@class='players_table']/tbody/tr[{}]/td[4]/text()".format(i))# 得分命中率数据解析shooting = html.xpath("//table[@class='players_table']/tbody/tr[{}]/td[6]/text()".format(i))# 三分命中率数据解析threeshooting = html.xpath("//table[@class='players_table']/tbody/tr[{}]/td[8]/text()".format(i))# 罚球命中率数据解析freeshooting = html.xpath("//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([# 指定图的iddcc.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__':# 开启服务，指定端口号为7000app.run_server(port=7000)

上述代码即定义一个dash应用程序，通过回调函数来控制不同图的展示

4，应用程序展示

当滑块滑至1时，得分条形图展示
得到下图

当滑块滑至2时，命中率条形图展示

当滑块滑至3时，得分折线图展示

当滑块滑至4时，得分命中率与三分命中率散点图展示