【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 的数据。
相关推荐
xiaoh_726 分钟前
解决视频处理中的 HEVC 解码错误:Could not find ref with POC xxx【已解决】
python·ffmpeg·音视频
明月与玄武1 小时前
Python编程的真谛:超越语法,理解编程本质
python·编程语言
CodeCraft Studio1 小时前
Excel处理控件Aspose.Cells教程:使用 Python 在 Excel 中进行数据验
开发语言·python·excel
拾忆-eleven2 小时前
C语言实战:用Pygame打造高难度水果消消乐游戏
c语言·python·pygame
旦莫2 小时前
Python 教程:我们可以给 Python 文件起中文名吗?
开发语言·python
豌豆花下猫2 小时前
Python 潮流周刊#99:如何在生产环境中运行 Python?(摘要)
后端·python·ai
小杨4042 小时前
python入门系列二十(peewee)
人工智能·python·pycharm
弧襪2 小时前
FlaskRestfulAPI接口的初步认识
python·flaskrestfulapi
船长@Quant2 小时前
文档构建:Sphinx全面使用指南 — 进阶篇
python·markdown·sphinx·文档构建
cloudy4912 小时前
强化学习:历史基金净产值,学习最大化长期收益
python·强化学习