在Plotly Go中创建自定义百分比下拉菜单并传递选中值至函数

场景1：使用Plotly Dash实现交互式回调（推荐，支持实时调用自定义函数） #

纯静态Plotly图表无法直接触发自定义函数执行，若要实现选中下拉选项时调用get_value()并更新图表，需要借助Plotly Dash框架的回调功能。以下是完整实现代码：

import dash
from dash import dcc, html, Input, Output, callback
import plotly.graph_objects as go

# 初始化Dash应用
app = dash.Dash(__name__)

# 定义自定义函数，处理传入的百分比数值并返回新的图表数据
def get_value(high):
    # 这里可以添加你的业务逻辑，比如根据百分比计算新的图表数据
    print(f"选中的百分比数值：{high}")
    # 示例：生成对应百分比的柱状图数据
    return go.Bar(x=["A", "B", "C"], y=[int(high)*0.1, int(high)*0.2, int(high)*0.3])

# 应用布局：下拉菜单+图表
app.layout = html.Div([
    dcc.Dropdown(
        id='percent-dropdown',
        options=[
            {'label': '40%', 'value': '40'},
            {'label': '60%', 'value': '60'},
            {'label': '80%', 'value': '80'}
        ],
        value='40',  # 默认选中值
        style={'width': '200px'}
    ),
    dcc.Graph(id='updateable-graph')
])

# 回调函数：监听下拉菜单变化，调用自定义函数并更新图表
@callback(
    Output('updateable-graph', 'figure'),
    Input('percent-dropdown', 'value')
)
def update_graph(selected_percent):
    # 调用自定义函数获取处理后的数据
    trace = get_value(selected_percent)
    # 返回更新后的图表对象
    return go.Figure(data=[trace], layout=go.Layout(title=f"基于{selected_percent}%的图表"))

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

场景2：纯静态Plotly图表（预先计算所有情况，无实时函数调用） #

如果不想使用Dash，只能预先计算每个百分比对应的图表数据，通过下拉菜单直接切换数据。这种方式无法实时调用自定义函数，仅能切换预设好的内容：

import plotly.graph_objects as go

# 预先计算各百分比对应的图表数据
def get_value(high):
    return go.Bar(x=["A", "B", "C"], y=[int(high)*0.1, int(high)*0.2, int(high)*0.3])

# 生成所有预设数据
data_40 = get_value("40")
data_60 = get_value("60")
data_80 = get_value("80")

# 构建下拉菜单
updatemenus = [
    dict(
        active=0,
        buttons=list([
            dict(label="40%",
                 method="update",
                 args=[{'data': [data_40]}]),
            dict(label="60%",
                 method="update",
                 args=[{'data': [data_60]}]),
            dict(label="80%",
                 method="update",
                 args=[{'data': [data_80]}]),
        ]),
        x=1,
        y=1.2
    )
]

# 创建初始图表
fig = go.Figure(data=[data_40], layout=go.Layout(title="初始图表"))
fig.update_layout(updatemenus=updatemenus)

fig.show()

说明：第一种场景（Dash）支持实时触发自定义函数处理逻辑，适合需要动态计算数据的场景；第二种场景仅适合数据可预先计算的静态交互需求。

内容的提问来源于stack exchange，提问作者Sonali Shelke