st.plotly_chart

显示一个交互式的Plotly图表。

Plotly 是一个用于 Python 的图表库。 此函数的参数与 Plotly 的 plot() 函数的参数非常相似。

要在Streamlit中显示Plotly图表，可以在调用Plotly的py.plot或py.iplot的地方调用st.plotly_chart。

重要

你必须安装plotly才能使用此命令。安装orjson也可能提升你的应用性能。

函数签名[source]

st.plotly_chart(figure_or_data, use_container_width=False, *, theme="streamlit", key=None, on_select="ignore", selection_mode=('points', 'box', 'lasso'), **kwargs)

参数

figure_or_data (plotly.graph_objs.Figure, plotly.graph_objs.Data, or dict/list of plotly.graph_objs.Figure/Data)

要渲染的Plotly Figure或Data对象。有关图形描述的示例，请参见 https://plot.ly/python/。

use_container_width (bool)

是否用父容器的宽度覆盖图形的原生宽度。如果use_container_width是False （默认），Streamlit会根据绘图库设置图表的宽度以适应其内容，直到父容器的宽度。如果use_container_width是True，Streamlit会将图形的宽度设置为与父容器的宽度匹配。

theme ("streamlit" 或 None)

图表的主题。如果 theme 是 "streamlit"（默认）， Streamlit 使用其自己的设计默认值。如果 theme 是 None， Streamlit 回退到库的默认行为。

key (str)

一个可选的字符串，用于给这个元素一个稳定的身份。如果 key 是 None（默认值），这个元素的身份将根据其他参数的值来确定。

此外，如果启用了选择并且提供了 key，Streamlit 将在会话状态中注册该键以存储选择状态。选择状态是只读的。

on_select ("ignore" 或 "rerun" 或 callable)

图表应如何响应用户选择事件。这控制图表是否表现得像一个输入小部件。on_select 可以是以下之一：

  • "ignore"（默认）：Streamlit 不会对图表中的任何选择事件做出反应。图表不会表现得像一个输入小部件。
  • "rerun"：当用户在图表中选择数据时，Streamlit 将重新运行应用程序。在这种情况下，st.plotly_chart 将返回选择数据作为字典。
  • 一个callable：Streamlit 将重新运行应用程序并在应用程序的其余部分之前执行callable作为回调函数。在这种情况下，st.plotly_chart 将返回选择数据作为字典。

selection_mode ("points", "box", "lasso" 或这些的 Iterable)

图表的选取模式。可以是以下之一：

  • "points": 图表将允许基于单个数据点的选取。
  • "box": 图表将允许基于矩形区域的选取。
  • "lasso": 图表将允许基于自由形状区域的选取。
  • 上述选项的 Iterable: 图表将允许基于指定模式的选取。

默认情况下，所有选取模式都被激活。

**kwargs (null)

任何被Plotly的plot()函数接受的参数。

返回

(element or dict)

如果 on_select 是 "ignore"（默认值），此命令返回一个 图表元素的内部占位符。否则，此命令 返回一个类似字典的对象，支持键和 属性表示法。属性由 PlotlyState 字典模式描述。

示例

下面的示例直接来自https://plot.ly/python的示例。请注意，plotly.figure_factory需要scipy才能运行。

import streamlit as st
import numpy as np
import plotly.figure_factory as ff

# Add histogram data
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# Group data together
hist_data = [x1, x2, x3]

group_labels = ['Group 1', 'Group 2', 'Group 3']

# Create distplot with custom bin_size
fig = ff.create_distplot(
        hist_data, group_labels, bin_size=[.1, .25, .5])

# Plot!
st.plotly_chart(fig, use_container_width=True)
Built with Streamlit 🎈

Chart selections

PlotlyState

Plotly图表事件状态的模式。

事件状态存储在一个类似字典的对象中，该对象支持键和属性表示法。事件状态不能通过会话状态以编程方式更改或设置。

目前仅支持选择事件。

属性

selection (dict)

on_select 事件的状态。此属性返回一个类似字典的对象，支持键和属性表示法。 属性由 PlotlySelectionState 字典模式描述。

示例

尝试通过三种可用方法（直接点击、框选或套索）选择点。当前的选择状态可以通过会话状态或作为图表函数的输出获得。

import streamlit as st
import plotly.express as px

df = px.data.iris()  # iris is a pandas DataFrame
fig = px.scatter(df, x="sepal_width", y="sepal_length")

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

event
Built with Streamlit 🎈

PlotlySelectionState

Plotly图表选择状态的模式。

选择状态存储在一个类似字典的对象中，该对象支持键和属性表示法。选择状态不能通过Session State以编程方式更改或设置。

属性

points (list[dict[str, Any]])

图表中选中的数据点，包括通过框选和套索模式选择的数据点。数据包括与每个点关联的值和用于填充point_indices的点索引。如果为点分配了其他信息，例如大小或图例组，则也会包含在内。

point_indices (list[int])

图表中所有选定数据点的数值索引。每个识别点的详细信息包含在points中。

box (list[dict[str, Any]])

与框选择相关的元数据。这包括所选区域的坐标。

lasso (list[dict[str, Any]])

与套索选择相关的元数据。这包括所选区域的坐标。

示例

在处理更复杂的图表时，points 属性会显示额外的信息。请尝试在以下示例中选择点：

import streamlit as st
import plotly.express as px

df = px.data.iris()
fig = px.scatter(
    df,
    x="sepal_width",
    y="sepal_length",
    color="species",
    size="petal_length",
    hover_data=["petal_width"],
)

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

event.selection
Built with Streamlit 🎈

这是选择单个点时的选择状态示例：

{
  "points": [
    {
      "curve_number": 2,
      "point_number": 9,
      "point_index": 9,
      "x": 3.6,
      "y": 7.2,
      "customdata": [
        2.5
      ],
      "marker_size": 6.1,
      "legendgroup": "virginica"
    }
  ],
  "point_indices": [
    9
  ],
  "box": [],
  "lasso": []
}

Theming

默认情况下，Plotly图表使用Streamlit主题显示。这个主题时尚、用户友好，并融入了Streamlit的调色板。额外的好处是，您的图表可以更好地与应用程序的其他设计部分集成。

Streamlit 主题从 Streamlit 1.16.0 开始通过 theme="streamlit" 关键字参数提供。要禁用它并使用 Plotly 的原生主题，请改用 theme=None。

让我们看一下使用Streamlit主题和原生Plotly主题的图表示例：

import plotly.express as px import streamlit as st df = px.data.gapminder() fig = px.scatter( df.query("year==2007"), x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=60, ) tab1, tab2 = st.tabs(["Streamlit theme (default)", "Plotly native theme"]) with tab1: # Use the Streamlit theme. # This is the default. So you can also omit the theme argument. st.plotly_chart(fig, theme="streamlit", use_container_width=True) with tab2: # Use the native Plotly theme. st.plotly_chart(fig, theme=None, use_container_width=True)

点击下面交互式应用程序中的标签，查看启用和禁用Streamlit主题的图表。

Built with Streamlit 🎈

如果你在担心你自己的自定义设置是否仍然会被考虑，不用担心！你仍然可以更改你的图表配置。换句话说，尽管我们现在默认启用了Streamlit主题，但你可以用自定义颜色或字体覆盖它。例如，如果你想让图表线条变成绿色而不是默认的红色，你可以做到！

这是一个Plotly图表的示例，其中定义并反映了一个自定义的颜色比例尺：

import plotly.express as px import streamlit as st st.subheader("Define a custom colorscale") df = px.data.iris() fig = px.scatter( df, x="sepal_width", y="sepal_length", color="sepal_length", color_continuous_scale="reds", ) tab1, tab2 = st.tabs(["Streamlit theme (default)", "Plotly native theme"]) with tab1: st.plotly_chart(fig, theme="streamlit", use_container_width=True) with tab2: st.plotly_chart(fig, theme=None, use_container_width=True)

请注意，即使启用了Streamlit主题，自定义颜色比例仍然反映在图表中 👇

Built with Streamlit 🎈

要查看更多带有和不带有Streamlit主题的Plotly图表示例，请访问plotly.streamlit.app。

Previous: st.graphviz_chartNext: st.pydeck_chart
forum

还有问题吗？

我们的 论坛 充满了有用的信息和Streamlit专家。