Python Ploty学习： 最简单的Dash App

1 Ploty简介

示例来自官网A Minimal Dash App | Dash for Python Documentation | Plotly有改动

Ploty与matplotlib和seaborn相比，其核心优势在于可交互性，matplotlib和seaborn默认情况下不可交互，具备可交互性的图表在数据分析、展示方面更具优势。接下来通过一个不到40行程序绘制如下的可交互图表，展示一下Ploty的强大功能

 2 准备数据

可以直接访问原始CSV数据

也可以链接：https://pan.baidu.com/s/18bH-u52TvJGjtb4qumVF3w?pwd=1024 
提取码：1024 
 

3 编写代码

编写之前先安装相关库

pip install dash
pip install ploty
pip install pandas

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

df = pd.read_csv('gapminder_unfiltered.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'China', id ='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run_server(debug=True)

代码说明

from dash import Dash, html, dcc, callback, Output, Input

 导入dash，dash是一个Python的web框架，可用用来开发web程序。本例中ploty的图表最终会在一个html页面中展示。

dash的html类用于生成html页面的元素，dcc是Dash的动态交互组件，callback后面用于设置回调函数，用于最后生成图表的下拉窗口事件，Output，Input用于下拉窗口事件触发时切换数据输入输出，以便基于不同的数据生成图表。

import plotly.express as px

express是ploty的高级绘图接口，我们通常用它来绘制图表

df = pd.read_csv('gapminder_unfiltered.csv')

将gapminder_unfiltered.csv放到和代码文件在一个目录下，用pandas的read_csv函数读取（备注读取csv文件的方法很多，pandas库是比较推荐的一种方式，简单好用）

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'China', id ='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

 用Dash类创建一个app实例。app.layout属性是Dash布局参数，通常使用Dash的html库来生成并布局html组件。

html.H1顾名思义会生成一个一级标题，标题的内容在children参数中，style用来指定样式

'textAlign':'center'

是文本对齐并居中。

dcc是Dash的高级交互是控件，交互式的操作通常由其定义。dcc.Dropdown语句指明我们在一级标题下再放置一个下拉控件，可选下拉列表式数据源中的国家名称（做了唯一性处理），默认显示

China。

dcc.Graph(id='graph-content')

接下来放置了一个id为graph-content的图表控件，用于显示图表数据

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

@XX在Dash中通常用作装饰器。@callback提供了一个服务器端回调，该回调将一个或多个输出项的值与一个或多个输入项的值关联起来，这样在触发控件动作时进行回调，可以更改图表数据的输入输出，用于交互式生成图表。下面定义的update_graph就是回调函数，通过

df[df.country==value]获取选择到的国家所在列的数据，然后通过px.line绘图函数绘制折线图，并设置x坐标为year，y坐标为pop

if __name__ == '__main__':
    app.run_server(debug=True)

接下来调用app.run_server将会启动一个web程序，我们在控制台可以看到这个web程序的访问地址，点击链接即可访问看到我们绘制的第一个图形了。

 

debug=True的含义是让这个web服务开启调试模式，如支持热加载，让程序更新后直接刷新就能看到变化，无需重新启动以及提供一些调试按钮