【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 的数据。
相关推荐
淼_@淼几秒前
python-xml
xml·python·1024程序员节
yumgpkpm27 分钟前
CMP(类ClouderaCDP7.3(404次编译) )完全支持华为鲲鹏Aarch64(ARM)POC报告
大数据·hive·hadoop·python·elasticsearch·hbase·cloudera
前进的李工35 分钟前
LeetCode hot100:560 和为k的子数组:快速统计法
python·算法·leetcode·前缀和·哈希表
用户3721574261351 小时前
Python 高效实现 Excel 与 TXT 文本文件之间的数据转换
python
AndrewHZ2 小时前
【图像处理基石】图像滤镜的算法原理:从基础到进阶的技术解析
图像处理·python·opencv·算法·计算机视觉·滤镜·cv
百锦再2 小时前
Go与Python在AI大模型开发中的深度对比分析
java·开发语言·人工智能·python·学习·golang·maven
梨轻巧4 小时前
Maya Python基础: 类属性 VS 实例属性、实例方法、类方法、静态方法
python·maya
江塘4 小时前
机器学习-KNN算法实战及模型评估可视化(C++/Python实现)
开发语言·c++·人工智能·python·算法·机器学习
优秘UMI5 小时前
智能科技的附加特性:提升用户体验的多样选择
python·科技·其他·ai
蓝博AI5 小时前
基于卷积神经网络的汽车类型识别系统,resnet50,vgg16,resnet34【pytorch框架,python代码】
人工智能·pytorch·python·神经网络·cnn