如何为选定的单选项显示dash_table

-1 投票
1 回答
31 浏览
提问于 2025-04-14 15:54

我刚开始学习用Python做Dash编程,参考了plotly.community的内容。我已经能从我的AWS账户中显示出S3存储桶的列表,并且对于选定的存储桶,我可以显示所有的CSV文件。

接下来的步骤是,对于选定的CSV文件,我需要在同一页面上,电台按钮下方显示CSV的内容,使用Dash表格,并且要有滚动条和分页功能。非常感谢任何帮助,我在这里遇到了瓶颈,请帮帮我。

这是我到目前为止尝试的内容:

from dash import Dash, dcc, html, Input, Output, callback, dash_table
import boto3
import pandas as pd

# Retrieve the list of existing buckets
s3 = boto3.client('s3')
response = s3.list_buckets()
all_options = {}

# Output the bucket names
for bucket in response['Buckets']:
    # print(f'  {bucket["Name"]}')
    if bucket["Name"].startswith("ag-"):
        if len(all_options) < 5:
            # Get a list of all objects in the bucket
            objects = s3.list_objects_v2(Bucket=bucket['Name'])
            # Create a list to store the files in the bucket
            files = []

            # Iterate over the objects
            for obj in objects['Contents']:
                if obj['Key'].endswith('.csv'):
                    if len(files) < 5:
                        # Add the file name to the list
                        files.append(obj['Key'])
            # Add the bucket and files to the dictionary
            all_options[bucket['Name']] = files


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.RadioItems(
        list(all_options.keys()),
        0,
        id='buckets-radio',
    ),

    html.Hr(),
    dcc.RadioItems(id='files-radio'),
    html.Hr(),
    html.Div(id='display-selected-values')
])


@callback(
    Output('files-radio', 'options'),
    Input('buckets-radio', 'value'))
def set_cities_options(selected_bucket):
    return [{'label': i, 'value': i} for i in all_options[selected_bucket]]


@callback(
    Output('files-radio', 'value'),
    Input('files-radio', 'options'))
def set_cities_value(available_options):
    return available_options[0]['value']

@callback(
    Output('display-selected-values', 'children'),
    Input('buckets-radio', 'value'),
    Input('files-radio', 'value'))
def set_display_children(selected_bucket, selected_file):
    # obj = s3.get_object(Bucket=selected_country, Key=selected_city)
    # df = pd.read_csv(obj['Body'])
    #
    # app.layout = html.Div([
    #     html.H4('Simple interactive table'),
    #     html.P(id='table_out'),
    #     dash_table.DataTable(
    #         id='table',
    #         columns=[{"name": i, "id": i}
    #                  for i in df.columns],
    #         data=df.to_dict('records'),
    #         style_cell=dict(textAlign='left'),
    #         style_header=dict(backgroundColor="paleturquoise"),
    #         style_data=dict(backgroundColor="lavender")
    #     ),
    # ])
    #
    # def update_graphs(active_cell):
    #     if active_cell:
    #         cell_data = df.iloc[active_cell['row']][active_cell['column_id']]
    #         return f"Data: \"{cell_data}\" from table cell: {active_cell}"
    #     return "Click the table"

    return f'{selected_file} is a file in {selected_bucket}'


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

app.run_server(debug=True)

1 个回答

0

你的函数 set_display_children 现在返回的是一个字符串,而不是一个 div 里的子元素,这可能是最大的问题所在。

试着把这些地方改一下:

app.layout = html.Div([ 改成 returnvaluename = html.Div([

还有,把 return f'{selected_file} is a file in {selected_bucket}' 改成 return returnvaluename

我自己对 dash 也还很陌生,所以不确定这是不是唯一的问题,因为我不知道是否可以像你在 Output('display-selected-values', 'children') 中那样返回一个完整的 div 子元素。

如果这样还不行,可以试着只把数据表返回给你布局中的 dash_table.DataTable 项的 data 入口。

撰写回答