基于Python dash的交互式界面开发

老板让我学Python的dash库，之后要开发维护界面，但我没用过这个玩意儿，今天是学习的第一天，写了一个小例子来入门，分享一下，内容是利用dash生成了一个简单的交互页面，显示不同地区的国家的一些数据（人口，寿命，GDP）。

# @Time:2024-10-03 15:43
# @Author:冯浩然
# @File:demo2.py
# @Software:PyCharm

#库引入
from dash import Dash,html,dash_table,dcc,callback,Output,Input
import pandas as pd
import plotly.express as px

#数据获取
df=pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app = Dash()

#页面布局
app.layout = [
    #标题设置 
    html.Div(children = 'My firest APP about different countries`data'),

    #分割线
    html.Hr(),

    #创建了一个单选按钮组，包含三个选项：pop（人口）,lifeExp（寿命）,gdpPercat（GDP）,默认最开始显示pop，并设置索引为my-final-goal-want
    dcc.RadioItems(options = ['pop','lifeExp','gdpPercap'],value = 'pop',id = 'my-final-goal-want'),

    #分割线
    html.Hr(),

    #将Dataframe数据转化为字典，并以DataTable中的表格形式输出，每一页生成20条数据
    dash_table.DataTable(data = df.to_dict('records'),page_size = 20),


    html.Hr(),

    #创建一个新的图表，索引为my-final-graph
    dcc.Graph(figure = {},id = 'my-final-graph'),


    html.Hr(),
]

#添加交互信息
@callback(

    #根据选择的输入（pop,lifeExp,gdpPercat）,生成不同的直方图



    #指定了要更新输出的图表的索引ID（my-final-graph）及属性（图片）
    Output(component_id = 'my-final-graph',component_property = 'figure'),

    #指定了要触发更新的单击选项的索引ID(my-final-goal-want),以及获取的是对应的值value
    Input(component_id = 'my-final-goal-want',component_property = 'value'),
)
def update_graph(col_chosen):

    #定义了一个回调函数update_graph，入口参数为所选的列名col_chosen

    #画直方图，x坐标为国家所在州，纵坐标为所选列的平均值
    fig = px.histogram(df,x = 'continent',y = col_chosen,histfunc = 'avg')
    return fig



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

运行效果如下： http://127.0.0.1:8050/

若需要原始数据或解决问题，可私信，谢谢大家