### 使用 Plotly 实现三个组合控件的筛选按钮功能 要通过 `Plotly` 实现包含三个组合控件的筛选按钮功能，可以通过使用 Dash 框架来完成。Dash 是基于 Flask 和 Plotly 的 Python 框架，专门用于构建交互式的 Web 应用程序。以下是如何实现这一目标的具体方法： #### 1. 定义布局结构 在 Dash 中，可以定义应用的整体布局，其中包括多个交互式控件（如下拉菜单、单选按钮和复选框）。这些控件将作为用户的输入源。 ```python import dash from dash import dcc, html, Input, Output import plotly.express as px import pandas as pd app = dash.Dash(__name__) # 示例数据集 df = pd.DataFrame({ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] }) # 定义布局 app.layout = html.Div([ html.H4("水果销售情况"), # 下拉菜单控件 dcc.Dropdown( id="dropdown-city", options=[{"label": city, "value": city} for city in df['City'].unique()], value=df['City'].unique()[0], multi=False, placeholder="选择城市" ), # 单选按钮控件 dcc.RadioItems( id="radio-fruits", options=[{"label": fruit, "value": fruit} for fruit in df['Fruit'].unique()], value=df['Fruit'].unique()[0], labelStyle={'display': 'inline-block'} ), # 复选框控件 dcc.Checklist( id="checklist-amounts", options=[ {"label": f"{amt}", "value": amt} for amt in sorted(df['Amount'].unique()) ], value=[min(df['Amount']), max(df['Amount'])] ), # 图形显示区域 dcc.Graph(id="bar-chart") ]) ``` --- #### 2. 添加回调函数 Dash 提供了强大的回调机制，可以根据用户的选择动态更新图形或其他组件的内容。 ```python @app.callback( Output("bar-chart", "figure"), [ Input("dropdown-city", "value"), Input("radio-fruits", "value"), Input("checklist-amounts", "value") ] ) def update_graph(city, fruit, amounts): filtered_df = df[ (df["City"] == city) & (df["Fruit"] == fruit) & (df["Amount"].isin(amounts)) ] fig = px.bar(filtered_df, x="Fruit", y="Amount", title=f"筛选后的结果 ({city})") return fig if __name__ == "__main__": app.run_server(debug=True) ``` --- #### 关键点解析 1. **Dropdown 控件**：提供了一个单一选项的城市列表，用户可以选择特定城市的数据[^1]。 2. **Radio Items 控件**：允许用户从一组互斥的选项中选择一种水果类型[^3]。 3. **Checklist 控件**：让用户能够多选某些数值范围内的金额[^3]。 4. **Callback 函数**：当任意一个控件发生变化时，触发回调函数重新计算并渲染新的图表[^2]。 此方案利用了 Dash 的强大功能，结合 Plotly 的绘图能力，实现了高度自定义化的交互体验。 --- ###