在本文中，我们将深入探讨如何将Streamlit与Plotly库相结合，以创建具有高度交互性的Web可视化应用。相较于Matplotlib，Plotly以其出色的交互特性，在Web应用中大放异彩。

1. st.plotly_chart函数

st.plotly_chart是Streamlit中专门用于展示Plotly图形的函数。它能够将Plotly的Figure对象或数据对象直接渲染到页面上。与st.pyplot相比，st.plotly_chart提供了额外的交互参数，增强了图表的互动性。

参数说明：

key参数允许我们在交互过程中精确定位到具体的图表，而on_select参数则决定了图表如何响应用户的选择事件。on_select可取以下值：

1. ignore：忽略所有选择事件。
2. rerun：在图表中选择数据时，触发应用重新运行。
3. callable：选择数据后，触发应用重新运行，并执行指定的回调函数。

selection_mode参数定义了图表的选择模式，包括：

1. points：基于单个数据点的选择。
2. box：基于矩形区域的选择。
3. lasso：基于自由绘制区域的选择。

1.1. on_select=ignore

默认情况下，on_select设置为ignore，此时图表不支持选择操作。

import streamlit as st
import plotly.express as px

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")

st.plotly_chart(fig, key="iris")

1.2. on_select=rerun

当on_select设置为rerun时，选择的数据点将被返回。

event = st.plotly_chart(fig, key="iris", on_select="rerun")
event

1.3. on_select=callable

on_select=callable与rerun类似，允许在选择数据点后执行额外的处理。

def handle_selection():
    from datetime import datetime
    st.write(f"Selected data at {datetime.now()}")

event = st.plotly_chart(fig, key="iris", on_select=handle_selection)
event

2. 使用示例

2.1. 销售数据时间序列分析

本示例中，我们创建了一个模拟的销售数据时间序列，并使用st.plotly_chart展示图表。同时，设置on_select回调函数来处理用户的选择操作。

```python
import streamlit as st
import plotly.express as px
import pandas as pd

模拟销售数据

data = {
"Date": pd.date_range(start="2024-01-01", periods=100),
"Sales": [i**2 + 50 + 10 * (i % 10) for i in range(100)],
}
df = pd.DataFrame(data)

创建时间序列折线图

fig = px.scatter(df, x="Date", y="Sales")

显示图表并处理选择事件

def handle_selection():
selected_points = st.session_state["sales_chart"].selection.points
st.write("已选择的数据点:")
df = pd.DataFrame(columns=["日期", "销售额"])

for idx, p in enumerate(selected_points):
    df.loc[idx, "日期"] =