ToB企服应用市场:ToB评测及商务社交产业平台

标题: 『玩转Streamlit』--集成Plotly [打印本页]
作者: 星球的眼睛    时间: 前天 08:25
标题: 『玩转Streamlit』--集成Plotly
之前介绍了怎样在Streamlit App中使用Matplotlib库来画图。
本篇介绍 Steamlit结合Poltly的方法，相比于Matplotlib，Poltly的交互性更强，
更适合在Web应用中做为可视化的工具。
1. st.plotly_chart函数

st.plotly_chart函数专门用于在Steamlit应用中显示 Plotly 绘制的图形。
这个函数能够直接将Plotly Figure对象或者Poltly支持的数据对象直接渲染到页面的指定位置上。
st.plotly_chart的参数不多，与st.pyplot比，多了一些交互用的参数：
名称类型说明figure_or_dataFigure或Data对象themestr指定图表的主题use_container_widthbool决定是否使用父容器的宽度覆盖图形的原始宽度keystr为元素提供标识on_selectstr控制图表怎样响应用户选择变乱selection_modestr图表的选择模式因为Plotly绘制的图形可交互，通过key参数，在交互的过程中，我们可以准确地定位到交互的图表。
on_select参数有以下几种取值：
selection_mode参数定义图表的选择模式，包括：
on_select不同时，页面的效果如下：
1.1. on_select=ignore

ignore是on_select的默认值，此时Plotly图形上无法选择对象。
  1. import streamlit as st
  2. import plotly.express as px
  4. df = px.data.iris()
  5. fig = px.scatter(df, x="sepal_width", y="sepal_length")
  8. st.plotly_chart(fig, key="iris")
  9. # 或者
  10. # st.plotly_chart(fig, key="iris", on_select="ignore")
复制代码

此时，工具栏上没有选择数据的小工具。
1.2. on_select=rerun

此时，st.plotly_chart会将选择的数据点返回。
选择数据点时，可以切换成矩形选择和自由区域选择。
  1. event = st.plotly_chart(fig, key="iris", on_select="rerun")
  2. event
复制代码

1.3. on_select=callable

on_select=callable的效果on_select=rerun差不多，也能对数据点选择并得到选择的数据点。
不同之处在于，可以在选择数据点之后，调用callable函数举行额外的处理惩罚。
  1. def handle_selection():
  2.     from datetime import datetime
  4.     st.write(f"Selected data at {datetime.now()}")
  7. event = st.plotly_chart(fig, key="iris", on_select=handle_selection)
  8. event
复制代码

每次选择数据之后，上面的时间都会变革，说明handle_selection函数在每次选择数据之后都被回调。
2. 使用示例

下面通过示例演示实际场景中怎样使用streamlit和Poltly图表。
2.1. 销售数据时间序列分析

在这个示例中，首先创建了一个模仿的销售数据时间序列，然后通过st.plotly_chart展示图表，并设置on_select回调函数来处理惩罚用户在图表上的选择操纵。
当用户选择图上的点时，会在 Streamlit 应用中显示所选数据点对应的日期和销售额信息。
  1. import streamlit as st
  2. import plotly.express as px
  3. import pandas as pd
  5. # 模拟销售数据
  6. data = {
  7.     "Date": pd.date_range(start="2024-01-01", periods=100),
  8.     "Sales": [i**2 + 50 + 10 * (i % 10) for i in range(100)],
  9. }
  10. df = pd.DataFrame(data)
  12. # 创建时间序列折线图
  13. fig = px.scatter(df, x="Date", y="Sales")
  16. # 显示图表并处理选择事件
  17. def handle_selection():
  18.     selected_points = st.session_state["sales_chart"].selection.points
  19.     st.write("已选择的数据点:")
  20.     df = pd.DataFrame(columns=["日期", "销售额"])
  22.     for idx, p in enumerate(selected_points):
  23.         df.loc[idx, "日期"] = p["x"]
  24.         df.loc[idx, "销售额"] = p["y"]
  26.     st.dataframe(df)
  29. st.plotly_chart(fig, key="sales_chart", on_select=handle_selection)
复制代码

2.2. 模仿股票分析

使用generate_stock_data函数生成模仿的股票数据，再使用plotly.graph_objects创建一个烛台图，将模仿数据绘制到图表中。
编写一个回调函数，当用户在图表上选择某个点时，它会获取所选点的详细信息并在 Streamlit 应用中展示出来。
  1. import streamlit as st
  2. import plotly.graph_objects as go
  3. import pandas as pd
  4. import numpy as np
  7. # 生成随机模拟的股票数据
  8. def generate_stock_data(days=300):
  9.     dates = pd.date_range(start="2024-01-01", periods=days)
  10.     open_prices = np.random.rand(days) * 100 + 50
  11.     high_prices = open_prices + np.random.rand(days) * 10
  12.     low_prices = open_prices - np.random.rand(days) * 10
  13.     close_prices = open_prices + np.random.randn(days) * 5
  15.     data = {
  16.         "Date": dates,
  17.         "Open": open_prices,
  18.         "High": high_prices,
  19.         "Low": low_prices,
  20.         "Close": close_prices,
  21.     }
  22.     return pd.DataFrame(data)
  25. # 生成模拟股票数据
  26. df = generate_stock_data()
  28. # 创建交互式图表
  29. fig = go.Figure(
  30.     data=[
  31.         go.Candlestick(
  32.             x=df["Date"],
  33.             open=df["Open"],
  34.             high=df["High"],
  35.             low=df["Low"],
  36.             close=df["Close"],
  37.         )
  38.     ]
  39. )
  41. fig.update_layout(title="模拟股票价格", xaxis_title="Date", yaxis_title="Price")
  44. # onselect 回调函数
  45. def handle_selection():
  46.     selected_points = st.session_state.stock_chart.selection.points
  47.     st.write("Selected Stock Data Points:")
  49.     df = pd.DataFrame(columns=["日期", "开盘价", "收盘价", "最高价", "最低价"])
  51.     for idx, p in enumerate(selected_points):
  52.         print(idx, p)
  53.         df.loc[idx, "日期"] = p["x"]
  54.         df.loc[idx, "开盘价"] = p["open"]
  55.         df.loc[idx, "收盘价"] = p["close"]
  56.         df.loc[idx, "最高价"] = p["high"]
  57.         df.loc[idx, "最低价"] = p["low"]
  59.     st.dataframe(df)
  62. # 显示图表
  63. st.plotly_chart(fig, key="stock_chart", on_select=handle_selection)
复制代码

3. 总结

Streamlit 可以简化 Web 应用构建流程，Plotly 提供丰富图表类型，二者结合能快速将数据转化为交互式可视化应用，节省开辟时间。
别的，Plotly 图表交互性高，在 Streamlit 应用中可实现数据探索、筛选等操纵，增强用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4