Dash Mantine组件动态表格：结合Dropdown实现交互式数据展示

聖光之護

发布时间：2025-10-22 13:22:19

937人浏览过

来源于php中文网

原创

Dash Mantine组件动态表格：结合Dropdown实现交互式数据展示

本教程详细介绍了如何在dash应用中利用`dash_mantine_components`库的`dmc.table`组件和`dash_core_components`的`dcc.dropdown`实现动态表格。通过spotify数据集的案例，我们将学习如何根据用户选择的流派和子流派，实时更新并展示top 10艺术家列表。核心在于正确配置回调函数的`output`为`children`属性，并返回符合`dmc.table`结构要求的`html.thead`和`html.tbody`元素列表。

引言：Dash动态表格的魅力

在构建交互式数据可视化应用时，动态表格是不可或缺的组成部分。它允许用户通过各种控件（如下拉菜单、滑块等）实时筛选和查看数据，从而提供更深入的洞察。Dash作为Python领域流行的Web应用框架，结合dash_mantine_components (dmc) 库，能够帮助开发者快速构建美观且功能强大的仪表板。本教程将专注于如何利用dmc.Table组件和dcc.Dropdown组件，实现一个根据用户选择动态更新数据的表格。

环境准备与数据加载

在开始之前，请确保您已安装所需的Python库：dash、pandas、dash_core_components、dash_html_components和dash_mantine_components。

pip install dash pandas dash-core-components dash-html-components dash-mantine-components

我们将使用一个Spotify歌曲数据集，目标是根据用户选择的“流派”和“子流派”，展示该类别下的Top 10艺术家及其歌曲数量。

import pandas as pd
from dash import Dash, dcc, html, Input, Output
import dash_mantine_components as dmc

# 假设您的数据文件名为 'spotify_songs.csv'
# 请替换为您的实际数据路径
try:
    data = pd.read_csv('spotify_songs.csv')
except FileNotFoundError:
    print("请确保 'spotify_songs.csv' 文件存在于当前目录或提供正确路径。")
    # 创建一个模拟数据框用于演示，如果文件不存在
    data = pd.DataFrame({
        'Artist': ['ArtistA', 'ArtistB', 'ArtistC', 'ArtistD', 'ArtistA', 'ArtistB', 'ArtistE', 'ArtistF', 'ArtistA', 'ArtistB'] * 20,
        'Genre': ['Pop', 'Pop', 'Rock', 'Pop', 'Rock', 'Jazz', 'Pop', 'Rock', 'Pop', 'Jazz'] * 20,
        'Subgenre': ['Dance Pop', 'Electro Pop', 'Alternative Rock', 'Synth Pop', 'Classic Rock', 'Smooth Jazz', 'Dance Pop', 'Hard Rock', 'Electro Pop', 'Bebop'] * 20
    })
    # 确保模拟数据足够大，以产生Top 10结果
    data = data.sample(n=300, replace=True).reset_index(drop=True)


app = Dash(__name__)

# 获取流派和子流派的唯一值，用于下拉菜单选项
genres = data['Genre'].unique().tolist()
subgenres = data['Subgenre'].unique().tolist()

Dash应用布局构建

Dash应用的布局由一系列HTML组件构成。我们将创建一个包含两个下拉菜单（用于选择流派和子流派）和一个dmc.Table组件（用于展示动态数据）的简单布局。dmc.Table组件在初始时将是空的，其内容将由回调函数动态填充。

app.layout = dmc.Container(
    [
        dmc.Title("Spotify Top 10 艺术家动态榜单", order=1),
        dmc.Space(h="md"),

        dmc.Grid(
            [
                dmc.Col(
                    dcc.Dropdown(
                        id="genre-dropdown",
                        options=[{"label": g, "value": g} for g in genres],
                        placeholder="选择流派",
                        value=genres[0] if genres else None, # 默认选中第一个流派
                        clearable=False,
                    ),
                    span=6,
                ),
                dmc.Col(
                    dcc.Dropdown(
                        id="subgenre-dropdown",
                        options=[{"label": sg, "value": sg} for sg in subgenres],
                        placeholder="选择子流派",
                        value=subgenres[0] if subgenres else None, # 默认选中第一个子流派
                        clearable=False,
                    ),
                    span=6,
                ),
            ],
            gutter="xl",
        ),
        dmc.Space(h="xl"),

        dmc.Card(
            children=[
                dmc.Text("Top 10 艺术家", size='lg', color='dimmed', weight=500, align='center'),
                # dmc.Table组件将通过回调函数更新其children属性
                dmc.Table(id='top_10_artists', striped=True, highlightOnHover=True, withBorder=True, withColumnBorders=True),
            ],
            withBorder=True,
            shadow='lg',
            radius='md',
        ),
    ],
    fluid=True,
)

关键点: dmc.Table(id='top_10_artists') 在布局中被定义，但没有直接提供数据。其内容将完全由回调函数通过更新其children属性来控制。

实现核心交互：回调函数

回调函数是Dash应用的核心，它负责响应用户输入并更新应用布局。在本例中，我们将创建一个回调函数，监听genre-dropdown和subgenre-dropdown的值变化，然后计算并返回更新后的dmc.Table内容。

网易人工智能

网易数帆多媒体智能生产力平台

下载

回调函数签名解析

@app.callback(
    Output("top_10_artists", "children"), # 关键：更新dmc.Table的children属性
    Input("genre-dropdown", "value"),
    Input("subgenre-dropdown", "value")
)
def update_top_10_artists_table(selected_genre, selected_subgenre):
    # ... 函数体 ...

Output("top_10_artists", "children"): 这是最重要的部分。dmc.Table组件期望其内容（表头和表体）作为其children属性来渲染。因此，我们的回调函数必须返回一个包含html.Thead和html.Tbody元素的列表。尝试更新"table"属性（如原始问题中的尝试）会导致SchemaLengthValidationError，因为dmc.Table组件没有名为"table"的属性来接收这种结构。
Input("genre-dropdown", "value") 和 Input("subgenre-dropdown", "value"): 当这两个下拉菜单的选中值发生变化时，回调函数将被触发。

数据处理与HTML元素构建

在回调函数内部，我们将执行以下步骤：

根据选定的流派和子流派筛选原始数据集。
计算每个艺术家的歌曲数量，并获取Top 10。
将这些数据转换为html.Thead（表头）和html.Tbody（表体）的HTML结构。

为了提高代码的健壮性和可维护性，我们将使用循环来生成表格的行，而不是硬编码每一行。

@app.callback(
    Output("top_10_artists", "children"),
    Input("genre-dropdown", "value"),
    Input("subgenre-dropdown", "value")
)
def update_top_10_artists_table(selected_genre, selected_subgenre):
    if not selected_genre or not selected_subgenre:
        return html.Div("请选择流派和子流派以查看数据。", style={'textAlign': 'center', 'marginTop': '20px'})

    # 复制数据以避免修改原始DataFrame
    df_filtered = data.copy()

    # 根据选择的流派和子流派进行筛选
    df_filtered = df_filtered[
        (df_filtered['Genre'] == selected_genre) &
        (df_filtered['Subgenre'] == selected_subgenre)
    ]

    # 计算艺术家歌曲数量并获取Top 10
    artists_counts = df_filtered['Artist'].value_counts().reset_index()
    artists_counts.columns = ['Artist', 'Count'] # 重命名列以便后续访问
    top_10_artists = artists_counts.head(10)

    # 如果没有数据，返回提示信息
    if top_10_artists.empty:
        return html.Div("当前流派和子流派下没有找到艺术家数据。", style={'textAlign': 'center', 'marginTop': '20px'})

    # 构建表头
    header = html.Thead(
        html.Tr(
            [
                html.Th('艺术家'),
                html.Th('歌曲数量')
            ]
        )
    )

    # 构建表体
    # 使用列表推导式动态生成表格行
    rows = []
    for index, row_data in top_10_artists.iterrows():
        rows.append(
            html.Tr([
                html.Td(row_data['Artist']),
                html.Td(row_data['Count'])
            ])
        )
    body = html.Tbody(rows)

    # 返回表头和表体组成的列表
    return [header, body]

注意事项：

我们添加了对selected_genre和selected_subgenre是否为空的检查，以及对top_10_artists是否为空的检查，以提供更好的用户体验和错误处理。
使用artists_counts.columns = ['Artist', 'Count']重命名了列，使得在构建html.Td时可以更清晰地通过名称访问数据。
通过for循环和列表推导式生成html.Tr和html.Td，这比硬编码10行更加灵活和易于维护，尤其当结果数量不固定时。

完整示例代码

将所有部分整合，以下是完整的Dash应用代码：

import pandas as pd
from dash import Dash, dcc, html, Input, Output
import dash_mantine_components as dmc

# 假设您的数据文件名为 'spotify_songs.csv'
# 请替换为您的实际数据路径
try:
    data = pd.read_csv('spotify_songs.csv')
except FileNotFoundError:
    print("请确保 'spotify_songs.csv' 文件存在于当前目录或提供正确路径。")
    # 创建一个模拟数据框用于演示，如果文件不存在
    data = pd.DataFrame({
        'Artist': ['ArtistA', 'ArtistB', 'ArtistC', 'ArtistD', 'ArtistA', 'ArtistB', 'ArtistE', 'ArtistF', 'ArtistA', 'ArtistB'] * 20,
        'Genre': ['Pop', 'Pop', 'Rock', 'Pop', 'Rock', 'Jazz', 'Pop', 'Rock', 'Pop', 'Jazz'] * 20,
        'Subgenre': ['Dance Pop', 'Electro Pop', 'Alternative Rock', 'Synth Pop', 'Classic Rock', 'Smooth Jazz', 'Dance Pop', 'Hard Rock', 'Electro Pop', 'Bebop'] * 20
    })
    data = data.sample(n=300, replace=True).reset_index(drop=True)


app = Dash(__name__)

genres = data['Genre'].unique().tolist()
subgenres = data['Subgenre'].unique().tolist()

app.layout = dmc.Container(
    [
        dmc.Title("Spotify Top 10 艺术家动态榜单", order=1, align='center'),
        dmc.Space(h="md"),

        dmc.Grid(
            [
                dmc.Col(
                    dcc.Dropdown(
                        id="genre-dropdown",
                        options=[{"label": g, "value": g} for g in genres],
                        placeholder="选择流派",
                        value=genres[0] if genres else None,
                        clearable=False,
                    ),
                    span=6,
                ),
                dmc.Col(
                    dcc.Dropdown(
                        id="subgenre-dropdown",
                        options=[{"label": sg, "value": sg} for sg in subgenres],
                        placeholder="选择子流派",
                        value=subgenres[0] if subgenres else None,
                        clearable=False,
                    ),
                    span=6,
                ),
            ],
            gutter="xl",
        ),
        dmc.Space(h="xl"),

        dmc.Card(
            children=[
                dmc.Text("Top 10 艺术家", size='lg', color='dimmed', weight=500, align='center'),
                dmc.Space(h="sm"),
                dmc.Table(id='top_10_artists', striped=True, highlightOnHover=True, withBorder=True, withColumnBorders=True),
            ],
            withBorder=True,
            shadow='lg',
            radius='md',
        ),
    ],
    fluid=True,
    size="lg"
)

@app.callback(
    Output("top_10_artists", "children"),
    Input("genre-dropdown", "value"),
    Input("subgenre-dropdown", "value")
)
def update_top_10_artists_table(selected_genre, selected_subgenre):
    if not selected_genre or not selected_subgenre:
        return html.Div("请选择流派和子流派以查看数据。", style={'textAlign': 'center', 'marginTop': '20px'})

    df_filtered = data.copy()

    df_filtered = df_filtered[
        (df_filtered['Genre'] == selected_genre) &
        (df_filtered['Subgenre'] == selected_subgenre)
    ]

    artists_counts = df_filtered['Artist'].value_counts().reset_index()
    artists_counts.columns = ['Artist', 'Count']
    top_10_artists = artists_counts.head(10)

    if top_10_artists.empty:
        return html.Div("当前流派和子流派下没有找到艺术家数据。", style={'textAlign': 'center', 'marginTop': '20px'})

    header = html.Thead(
        html.Tr(
            [
                html.Th('艺术家'),
                html.Th('歌曲数量')
            ]
        )
    )

    rows = []
    for index, row_data in top_10_artists.iterrows():
        rows.append(
            html.Tr([
                html.Td(row_data['Artist']),
                html.Td(row_data['Count'])
            ])
        )
    body = html.Tbody(rows)

    return [header, body]

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

运行此代码，您将在浏览器中看到一个Dash应用，其中包含两个下拉菜单和一个动态更新的表格。

注意事项与最佳实践

Output属性的选择: 理解dmc.Table如何接收其内容至关重要。当需要完全控制表格的HTML结构（包括和）时，应将Output指向组件的children属性，并返回一个由html.Thead和html.Tbody组成的列表。如果dmc.Table提供了更高级的data或columns属性（类似于dash_table.DataTable），则可以考虑使用它们来简化数据绑定，但这取决于dash_mantine_components的具体实现。
数据为空或不足的处理: 在回调函数中加入逻辑来处理筛选结果

Python 配置文件加载的设计模式

Python HTTP 客户端 requests 的实现原理

Python 包结构设计的最佳实践

Python 虚拟环境 venv 的工作原理

Python 信号处理机制解析