【Dash】Web 应用程序中的可复用组件

一、Reuable Comopnents

By writing our makup in Python, we can create complex reusable components like tables without switching contexts or languages.

python 复制代码
from dash import Dash, html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/GarciaShanCW/DATA/main/usa-agricultural-exports-2011.csv')

def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


app = Dash(__name__)

app.layout = html.Div([
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])

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

二、解读

python 复制代码
from dash import Dash, html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/GarciaShanCW/DATA/main/usa-agricultural-exports-2011.csv')
  • 导入 Dash 类 (创建应用程序)和 html 组件(创建 HTML 元素)
  • 导入 pandas 库,用于数据处理
  • pd.read_csv() 函数 读取 URL 的数据文件,存储在 DataFrame 对象 df 中
python 复制代码
def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])

def generate_table(dataframe, max_rows=10):

  • 定义一个名为 generate_table 的函数,接受一个 dataframe 和一个可选参数 max_rows(默认为10)。生成一个 HTML 表格。

return html.Table([....])

  • 返回一个 html.Table 组件,包含一个表头 html.Thead 和 一个表体 html.Tbody。

html.Thead(html.Tr([html.Th(col) for col in dataframe.columns])),

  • html.Thead:创建 HTML 中的 <thead> 元素,它是表格的头部区域,通常包含列标题
  • html.Tr:创建 HTML 中的 <tr> 元素
  • html.Th(col) for col in dataframe.columns\]:遍历所有列名,对于每个列名 col,html.Th(col) 创建一个表头单元格,包含该列的名称

html.Tr([ html.Td(..)]) for i in range(min(len(dataframe),max_rows))

  • Python 中的一个列表推导式,它用于生成一个表格行(html.Tr)的列表,其中每个行包含若干个表格单元格(html.Td)。这个结构在 Dash 应用程序中用来构建动态生成的表格数据。
  • html.Tr:这是 Dash 中创建 HTML 表格行 <tr> 的函数。
  • html.Td():这是 Dash 中创建 HTML 表格单元格 <td> 的函数,用于存放数据。
  • html.Td()\]:这是一个列表,包含一个 html.Td 组件实例。这个列表可以包含多个 html.Td 实例,每个实例代表表格中的一个单元格。

html.Td(dataframe.iloc[i][col]) for col in dataframe.columns

  • 表头由列名组成,表体由行组成,每行包含列的值。
  • dataframe 是一个 pandas DataFrame 对象,是一个二维表格数据结构,类似Excel表格
  • iloc 是 DataFrame 的一个索引器,用于基于行的整数位置选择行
  • col 是一个列名,它将用于从 DataFrame 中选择列数据
  • min(len(dataframe), max_rows) 确保即使 DataFrame 中的行数超过 max_rows,也只显示前 max_rows 行。
python 复制代码
app = Dash(__name__)

app.layout = html.Div([
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])
  • 设置 app 的布局,使用 html.Div 组件包裹所有子组件。布局中包括一个标题 html.H4,显示 "US Agriculture Exports (2011)",以及调用 generate_table 函数生成的表格,该表格显示了 df DataFrame 的数据。
相关推荐
reasonsummer13 分钟前
【办公类-116-01】20250929家长会PPT(Python快速批量制作16:9PPT相册,带文件名,照片横版和竖版)
java·数据库·python·powerpoint
拉姆哥的小屋15 分钟前
基于提示学习的多模态情感分析系统:从MULT到PromptModel的华丽升级
python·深度学习·学习
蒋星熠44 分钟前
爬虫与自动化技术深度解析:从数据采集到智能运维的完整实战指南
运维·人工智能·爬虫·python·深度学习·机器学习·自动化
大翻哥哥3 小时前
Python 2025:异步革命与AI驱动下的开发新范式
开发语言·人工智能·python
hhzz3 小时前
Pythoner 的Flask项目实践-在web页面实现矢量数据转换工具集功能(附源码)
前端·python·flask
学习的学习者4 小时前
CS课程项目设计19:基于DeepFace人脸识别库的课堂签到系统
人工智能·python·深度学习·人脸识别算法
悠哉悠哉愿意4 小时前
【数据结构与算法学习笔记】双指针
数据结构·笔记·python·学习·算法
MoRanzhi12034 小时前
5. Pandas 缺失值与异常值处理
数据结构·python·数据挖掘·数据分析·pandas·缺失值处理·异常值处理
程序员的奶茶馆5 小时前
Python 字典速查:键值对操作与高频函数
python·面试
tryCbest5 小时前
Python 使用 Redis 详细教程
redis·python·bootstrap