当有人单击自定义按钮时，我可以触发什么输入事件

Question

我有这个图-

import plotly.graph_objects as go
import pandas as pd
# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")
# create figure
fig = go.Figure()
# Add surface trace
fig.add_trace(go.Surface(z=df.values.tolist(), colorscale="Viridis"))
# Update plot sizing
fig.update_layout(
width=800,
height=900,
autosize=False,
margin=dict(t=0, b=0, l=0, r=0),
template="plotly_white",
)
# Update 3D scene options
fig.update_scenes(
aspectratio=dict(x=1, y=1, z=0.7),
aspectmode="manual"
)
# Add dropdown
fig.update_layout(
updatemenus=[
dict(
type = "buttons",
direction = "left",
buttons=list([
dict(
args=["type", "surface"],
label="3D Surface",
method="restyle"
),
dict(
args=["type", "heatmap"],
label="Heatmap",
method="restyle"
)
]),
pad={"r": 10, "t": 10},
showactive=True,
x=0.11,
xanchor="left",
y=1.1,
yanchor="top"
),
]
)
# Add annotation
fig.update_layout(
annotations=[
dict(text="Trace type:", showarrow=False,
x=0, y=1.08, yref="paper", align="left")
]
)
fig.show()

每当有人点击这两个按钮中的任何一个时，我都想更新图表。我需要将更新代码连接到某个事件。例如，如果是更改x轴，我可以使用relayout_data事件。当有人单击我可以绑定到Input((回调的自定义按钮时，是否有任何事件被触发？

Answer 1

有好消息也有坏消息：

坏消息是：对此没有直接的调整，您可能也需要使用javascript。

好消息是：这里有两个选项来满足这一要求：

选项#1:javascript

import plotly.graph_objects as go
import pandas as pd
# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")
# create figure
fig = go.Figure()
# Add surface trace
fig.add_trace(go.Surface(z=df.values.tolist(), colorscale="Viridis"))
# Update plot sizing
fig.update_layout(
width=800,
height=900,
autosize=False,
margin=dict(t=0, b=0, l=0, r=0),
template="plotly_white",
)
# Update 3D scene options
fig.update_scenes(
aspectratio=dict(x=1, y=1, z=0.7),
aspectmode="manual"
)
# Add dropdown
fig.update_layout(
updatemenus=[
dict(
type = "buttons",
direction = "left",
buttons=list([
dict(
args=["type", "surface"],
label="3D Surface",
method="restyle",
execute=False
),
dict(
args=["type", "heatmap"],
label="Heatmap",
method="restyle",
execute=False
)
]),
pad={"r": 10, "t": 10},
showactive=True,
x=0.11,
xanchor="left",
y=1.1,
yanchor="top"
),
]
)
# Add annotation
fig.update_layout(
annotations=[
dict(text="Trace type:", showarrow=False,
x=0, y=1.08, yref="paper", align="left")
]
)
fig.show()

注意我们添加execute=False的部分。这允许JS函数plotly_buttonclicked充当组件单击的可自定义回调函数。

根据本文件：

属性execute如果为true，则执行API方法。当为假时，所有其他行为都相同，并且跳过命令执行。例如，当挂接到plotly_buttonclicked方法，手动执行API命令而不会失去updatemenu自动绑定到通过指定方法和参数来显示绘图的状态。

execute属性必须指定为bool(True或False(

返回返回类型bool

选项#2：驻留到dash:

由于plotly是建立在dash之上的，因此您可以在它们之间来回切换。以下是你应该怎么做：

from dash import Dash, dcc, html, ctx
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import plotly.graph_objects as go
import pandas as pd
# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")
# create figure
fig = go.Figure()
# Add surface trace
fig.add_trace(go.Surface(z=df.values.tolist(), colorscale="Viridis"))
# Update plot sizing
fig.update_layout(
width=800,
height=900,
autosize=False,
margin=dict(t=0, b=0, l=0, r=0),
template="plotly_white",
)
# Update 3D scene options
fig.update_scenes(
aspectratio=dict(x=1, y=1, z=0.7),
aspectmode="manual"
)
# Add dropdown
fig.update_layout(
updatemenus=[
dict(
type = "buttons",
direction = "left",
buttons=list([
dict(
args=["type", "surface"],
label="3D Surface",
method="restyle",
execute=False
),
dict(
args=["type", "heatmap"],
label="Heatmap",
method="restyle",
execute=False
)
]),
pad={"r": 10, "t": 10},
showactive=True,
x=0.11,
xanchor="left",
y=1.1,
yanchor="top"
),
]
)
# Add annotation
fig.update_layout(
annotations=[
dict(text="Trace type:", showarrow=False,
x=0, y=1.08, yref="paper", align="left")
]
)
# Instead of loading the figure relying on `plotly`'s engine, how about embedding it as a `dash` object:
#fig.show()
dash_fig = dcc.Graph(figure=fig)
app = Dash(__name__)
app.layout = html.Div([
html.Label('Trace Type:', id='ttype'),
html.Button('Surface', id='surf', n_clicks=0),
html.Button('Heatmap', id='heat', n_clicks=0),
dash_fig])

@app.callback(
Output('ttype', 'children'),
Input(component_id='surf', component_property='n_clicks'),
Input(component_id='heat', component_property='n_clicks'))
def click_callback(n1,n2):
return f'{ctx.triggered_id}:{n1}:{n2}'

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

请注意，现在我们有了回调函数click_callback。

重新实现图形更改代码的任务仍然存在，因为现在必须手动完成。