【Dash搭建可视化网站】项目4： 利用Dash Plotly实现数据图表可视化

手动反爬虫，禁止转载：原博地址 https://blog.csdn.net/lys_828/article/details/122073681（CSDN博主：Be_melting）

 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息

项目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绘制图形十分简洁明了。

至此整个项目4，利用Dash Plotly实现数据图表可视化就介绍完毕。解决了项目1案例中留下的问题：如何将数据的可视化图展示在网址上。还有三个核心知识点：px如何使用、px如何与dash结合、px与原来go绘图的区别。