【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.Th(col)：用于创建 HTML 中的 <th> 元素，即表格中的表头单元格。

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 实例，每个实例代表表格中的一个单元格。

for i in range(...)：这是一个循环，range(...) 函数生成一个起始默认为 0 的序列，长度由提供的参数决定。循环变量 i 将用于索引数据或其他用途。

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 的数据。