【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 的数据。
相关推荐
带娃的IT创业者37 分钟前
《Python实战进阶》No39:模型部署——TensorFlow Serving 与 ONNX
pytorch·python·tensorflow·持续部署
Bruce-li__44 分钟前
深入理解Python asyncio:从入门到实战,掌握异步编程精髓
网络·数据库·python
九月镇灵将1 小时前
6.git项目实现变更拉取与上传
git·python·scrapy·scrapyd·gitpython·gerapy
小张学Python1 小时前
AI数字人Heygem:口播与唇形同步的福音,无需docker,无需配置环境,一键整合包来了
python·数字人·heygem
跳跳糖炒酸奶1 小时前
第四章、Isaacsim在GUI中构建机器人(2):组装一个简单的机器人
人工智能·python·算法·ubuntu·机器人
步木木2 小时前
Anaconda和Pycharm的区别,以及如何选择两者
ide·python·pycharm
星始流年2 小时前
解决PyInstaller打包PySide6+QML应用的资源文件问题
python·llm·pyspider
南玖yy2 小时前
Python网络爬虫:从入门到实践
爬虫·python
The Future is mine3 小时前
Python计算经纬度两点之间距离
开发语言·python
九月镇灵将3 小时前
GitPython库快速应用入门
git·python·gitpython