【Dash】A Minimal Dash App

 一、代码

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

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

app = Dash()

app.layout = [
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', 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(debug=True)

二、解读

查看csv数据，表头由以下字段组成：

country

continent

year

lifeExp

pop

gdpPercap

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

从 dash 库中导入主要组件和函数，Dash是Dash应用的核心类，html 和 dcc 分别提供了 HTML 和 Dash核心组件，callback 、Output 和 Input 用于定义回调函数和输入输出关系。

import plotly.express as px

导入 plotly.express 模块，并将其重命名为 px。用于快速生成图表。

import pandas as pd

导入pandas 库，重命名为 pd。

pandas 是强大的数据处理库，常常用于数据分析和数据清洗。

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

读取一个csv文件。

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

• 创建Dash应用实例。
• 布局是一个组件列表，定义了应用的结构和内容。
• html.H1() 添加一个一级标题组件，显示为'Title of Dash App'，文本居中。
• dcc.Dropdown() 添加一个下拉选择组件，选项是 df 数据集中的 country ，unique() 使得选项不会重复多次出现。初始值设置为'Canada'。组件ID为'dropdown-selection'，用于在回调函数中引用。
• dcc.Graph() 添加一个图表组件，ID为'graph-content'，用于显示图表。

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)

• @callback() 定义一个回调函数，回调函数用于响应用户的操作（如下拉选择的变化），并更新应用的某些部分。
• Output() 指定回调函数的输出'graph-content' 图表组件，指定图表组件更新的属性为 fingure ，figure 属性是一个包含图表数据和配置的字典。这个字典通常由 Plotly 图表生成器（如 plotly.express 或者 plotly.graph_objs）创建，并包含了生成图表所需的所有信息，如数据结构、轴标签、标题等等。因此，在回调函数中返回一个新的 figure 字典时， Dash 会自动更新与之对应的 dcc.Graph 组件图表。
• Input() 定义回调函数的输入，即下拉选择组件的 value 属性。

def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

• 根据下拉选择的值筛选数据，生成一个新的DataFrame 'dff'。
• 使用 plotly.express 生成一个折线图，其中 x 轴是年份，y 轴是人口数。生成的图表返回给回调函数的输出。

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

启动 Dash 应用，并开启调试模式。

调试模式允许在开发过程中自动重新加载应用，方便开发和调试。

这段代码的功能是创建一个简单的Dash应用，应用中包含一个下拉选择组件和一个图表组件。用户可以通过下拉选择组件选择一个国家，然后图表组件会显示该国家随年份变化的人口数据。