Plotly <-> Streamlit 交互式按钮答案

【问题标题】：Plotly <-> Streamlit interactive buttonsPlotly <-> Streamlit 交互式按钮
【发布时间】：2022-09-24 09:17:52
【问题描述】：

如何在 plotly 中制作交互式按钮，这将更改图表并将它们的交互发送到 streamlit？

我已经尝试在 plotly https://plotly.com/python/custom-buttons/#relayout-button 中使用内置按钮

这适用于更改图表，但无法将行为作为点击事件的交互发送到此处https://plotly.com/python/click-events/

目前在 streamlit 中只有一个库来获取 plotly 图表的交互，据我所知，在引擎盖下它使用 plotly 事件 https://github.com/null-jones/streamlit-plotly-events

所以我能想出的唯一解决方案是创建第二个图表作为子图并将其样式设置为看起来像一个按钮。这是一个重大的黑客攻击，并且出现了许多危险信号，但我想不出另一种方法来做到这一点。

这是我到目前为止所拥有的：

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(rows=1, cols=2, column_widths=[0.1, 0.7])

fig.add_trace(
    go.Bar(x=[1, 1], y=[\'foo\', \'bar\'], orientation=\'h\', width=.4, hoverinfo=\'skip\'),
              row=1, col=1)

fig.add_trace(
    go.Bar(x=[1, 1], y=[\'foo\', \'bar\'], orientation=\'h\', width=.4, hoverinfo=\'skip\'),
              row=1, col=1)



fig.add_trace(
    go.Bar(
        x=[1, 2],
        y=[\'foo\', \'bar\'],
        orientation=\'h\',
        name=\'revenue\',
        width=.4
    ),
    row=1, col=2)


fig.add_trace(
    go.Bar(
        x=[2, 4],
        y=[\'foo\', \'bar\'],
        orientation=\'h\',
        name=\'potential\',
        width=.4
        
    ),
    row=1, col=2)
fig.update_yaxes(matches=\'y\')

fig.update_layout(barmode=\'stack\',
                  title_text=\"Multiple Subplots with Shared Y-Axes\")


fig.show()

我错过了什么吗？

标签： plotly mouseclick-event streamlit

【解决方案1】：

我希望你做得很好。

我遇到了类似的问题：我需要根据散点图上的点击操作来显示特定的视频。我的第一次尝试与上面的代码类似，但后来我在 Streamlit 论坛中找到了这个链接 https://discuss.streamlit.io/t/how-to-show-audio-player-when-point-on-interactive-plot-is-clicked/20664，在那里我获得了 Plotly 的 null-jones 插件 https://github.com/null-jones/streamlit-plotly-events。

因此，我的方法如下：

我已经使用 pip 安装了插件：pip install streamlit-plotly-events;

我使用带有视频路径的hover_name 属性集生成了散点图：

 import plotly.express as px
 fig = px.scatter(df, x=0, y=1, hover_name=df.paths)

我创建了一个用于映射 hover_text 和散点图坐标的字典：

 x_data = fig.data[0]['x']
 y_data = fig.data[0]['y']
 hoverdata = fig.data[0]['hovertext']
 for x_val, y_val, text in zip(x_data, y_data, hoverdata):
     if (x_val, y_val) not in st.session_state.data_dict.keys():
         st.session_state.data_dict[(x_val, y_val)] = text

使用插件，我得到了每个点击点的坐标：

 from streamlit_plotly_events import plotly_events

 # this line displays the plot already
 selected_points = plotly_events(fig, click_event=True)

 current_x = selected_points[0]['x']
 current_y = selected_points[0]['y']
 video_path = st.session_state.data_dict[(current_x, current_y)]

使用 video_path，最后一步是使用 st.video() 方法在应用程序中显示视频：

 video_file = open(video_path, 'rb')
 video_bytes = video_file.read()
 st.video(video_bytes)

【讨论】：