Chart elements

Streamlit 支持多种不同的图表库，我们的目标是不断添加对更多库的支持。目前，我们库中最基础的是 Matplotlib。此外，还有交互式图表库，如 Vega Lite（二维图表）和 deck.gl（地图和三维图表）。最后，我们还提供了一些 Streamlit 原生的图表类型，如 st.line_chart 和 st.area_chart。

Simple chart elements

简单面积图

显示一个区域图。

st.area_chart(my_data_frame)

简单的条形图

显示一个条形图。

st.bar_chart(my_data_frame)

简单的折线图

显示一个折线图。

st.line_chart(my_data_frame)

简单的散点图

显示一个折线图。

st.scatter_chart(my_data_frame)

地图上的散点图

在地图上显示点。

st.map(my_data_frame)

Advanced chart elements

Matplotlib

显示一个matplotlib.pyplot图形。

st.pyplot(my_mpl_figure)

Altair

使用Altair库显示图表。

st.altair_chart(my_altair_chart)

Vega-Lite

使用Vega-Lite库显示图表。

st.vega_lite_chart(my_vega_lite_chart)

Plotly

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

st.plotly_chart(my_plotly_chart)

Bokeh

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

st.bokeh_chart(my_bokeh_chart)

PyDeck

使用PyDeck库显示图表。

st.pydeck_chart(my_pydeck_chart)

GraphViz

使用 dagre-d3 库显示图形。

st.graphviz_chart(my_graphviz_spec)

第三方组件

这些是由我们可爱的社区创建的精选组件。更多示例和灵感，请查看我们的 组件库 和 Streamlit 扩展！

Previous

Streamlit Lottie

在你的Streamlit应用中集成Lottie动画。由@andfanilo创建。

lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json") st_lottie(lottie_hello, key="hello")

Plotly 事件

使Plotly图表具有交互性！由@null-jones创建。

fig = px.line(x=[1], y=[1]) selected_points = plotly_events(fig)

Streamlit 扩展

一个包含有用Streamlit附加功能的库。由@arnaudmiribel创建。

chart += get_annotations_chart(annotations=[("Mar 01, 2008", "Pretty good day for GOOG"), ("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"), ("Nov 01, 2008", "Market starts again thanks to..."), ("Dec 01, 2009", "Small crash for GOOG after..."),],) st.altair_chart(chart, use_container_width=True)

Plost

一个看似简单的Streamlit绘图库。由@tvst创建。

import plost plost.line_chart(my_dataframe, x='time', y='stock_value', color='stock_name',)

HiPlot

高维交互式绘图。由@facebookresearch创建。

data = [{'dropout':0.1, 'lr': 0.001, 'loss': 10.0, 'optimizer': 'SGD'}, {'dropout':0.15, 'lr': 0.01, 'loss': 3.5, 'optimizer': 'Adam'}, {'dropout':0.3, 'lr': 0.1, 'loss': 4.5, 'optimizer': 'Adam'}] hip.Experiment.from_iterable(data).display()

ECharts

高维交互式绘图。由@andfanilo创建。

from streamlit_echarts import st_echarts st_echarts(options=options)

Streamlit Folium

用于渲染Folium地图的Streamlit组件。由@randyzwitch创建。

m = folium.Map(location=[39.949610, -75.150282], zoom_start=16) st_data = st_folium(m, width=725)

Spacy-Streamlit

spaCy 构建块和 Streamlit 应用程序的可视化工具。由 @explosion 创建。

models = ["en_core_web_sm", "en_core_web_md"] spacy_streamlit.visualize(models, "Sundar Pichai is the CEO of Google.")

Streamlit Agraph

一个基于react-grah-vis的Streamlit图形可视化工具。由@ChrisDelClea创建。

from streamlit_agraph import agraph, Node, Edge, Config agraph(nodes=nodes, edges=edges, config=config)

Streamlit Lottie

在你的Streamlit应用中集成Lottie动画。由@andfanilo创建。

lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json") st_lottie(lottie_hello, key="hello")

Plotly 事件

使Plotly图表具有交互性！由@null-jones创建。

fig = px.line(x=[1], y=[1]) selected_points = plotly_events(fig)

Streamlit 扩展

一个包含有用Streamlit附加功能的库。由@arnaudmiribel创建。

chart += get_annotations_chart(annotations=[("Mar 01, 2008", "Pretty good day for GOOG"), ("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"), ("Nov 01, 2008", "Market starts again thanks to..."), ("Dec 01, 2009", "Small crash for GOOG after..."),],) st.altair_chart(chart, use_container_width=True)

Plost

一个看似简单的Streamlit绘图库。由@tvst创建。

import plost plost.line_chart(my_dataframe, x='time', y='stock_value', color='stock_name',)

HiPlot

高维交互式绘图。由@facebookresearch创建。

data = [{'dropout':0.1, 'lr': 0.001, 'loss': 10.0, 'optimizer': 'SGD'}, {'dropout':0.15, 'lr': 0.01, 'loss': 3.5, 'optimizer': 'Adam'}, {'dropout':0.3, 'lr': 0.1, 'loss': 4.5, 'optimizer': 'Adam'}] hip.Experiment.from_iterable(data).display()

ECharts

高维交互式绘图。由@andfanilo创建。

from streamlit_echarts import st_echarts st_echarts(options=options)

Streamlit Folium

用于渲染Folium地图的Streamlit组件。由@randyzwitch创建。

m = folium.Map(location=[39.949610, -75.150282], zoom_start=16) st_data = st_folium(m, width=725)

Spacy-Streamlit

spaCy 构建块和 Streamlit 应用程序的可视化工具。由 @explosion 创建。

models = ["en_core_web_sm", "en_core_web_md"] spacy_streamlit.visualize(models, "Sundar Pichai is the CEO of Google.")

Streamlit Agraph

一个基于react-grah-vis的Streamlit图形可视化工具。由@ChrisDelClea创建。

from streamlit_agraph import agraph, Node, Edge, Config agraph(nodes=nodes, edges=edges, config=config)

Streamlit Lottie

在你的Streamlit应用中集成Lottie动画。由@andfanilo创建。

lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json") st_lottie(lottie_hello, key="hello")

Plotly 事件

使Plotly图表具有交互性！由@null-jones创建。

fig = px.line(x=[1], y=[1]) selected_points = plotly_events(fig)

Streamlit 扩展

一个包含有用Streamlit附加功能的库。由@arnaudmiribel创建。

chart += get_annotations_chart(annotations=[("Mar 01, 2008", "Pretty good day for GOOG"), ("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"), ("Nov 01, 2008", "Market starts again thanks to..."), ("Dec 01, 2009", "Small crash for GOOG after..."),],) st.altair_chart(chart, use_container_width=True)

Next

Previous: Data elementsNext: st.area_chart

forum

还有问题吗？

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