系列参考：
python︱写markdown一样写网页，代码快速生成web工具：streamlit介绍（一）
python︱写markdown一样写网页，代码快速生成web工具：streamlit 重要组件介绍（二）
python︱写markdown一样写网页，代码快速生成web工具：streamlit 展示组件（三）
python︱写markdown一样写网页，代码快速生成web工具：streamlit lay-out布局（四）
python︱写markdown一样写网页，代码快速生成web工具：streamlit 缓存（五）
python︱写markdown一样写网页，代码快速生成web工具：streamlit 数据探索案例（六）
streamlit + opencv/YOLOv3 快速构建自己的图像目标检测demo网页（七）

github代码链接：mattzheng/streamlit_demo

上篇主要是steamlit的介绍以及streamlit的一些初始化，这篇是一些组件的介绍，当然风格是直接上代码。参考代码：mattzheng/display

1 文本显示 display-text

1.0 各类文本展示

""" # 1 文本显示 display-text  - 常规文本 - `st.text`
- 写markdown - `st.markdown`
- 写latex - `st.latex`
- 直接写标题 - `st.title`
- 写副标题 - `st.subheader`"""st.text('This will appear first')
# Appends some text to the app.st.title('This is a title')
st.subheader('This is a subheader')st.markdown('Streamlit is **_really_ cool**.')st.latex(r'''a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =\sum_{k=0}^{n-1} ar^k =a \left(\frac{1-r^{n}}{1-r}\right)''')

1.1 st.write`的各种写法

"""1.1 **`st.write`的各种写法**
- text
- dataframe:可以穿插着写，非常方便
- 可以直接写出表格"""st.write('Hello, *World!* :sunglasses:')data_frame = pd.DataFrame({'first column': [1, 2, 3, 4],'second column': [10, 20, 30, 40],
})st.write(1234)
st.write(data_frame)st.write('1 + 1 = ', 2)
st.write('Below is a DataFrame:', data_frame, 'Above is a dataframe.')

1.2 直接写表格/图表

"""**1.2 直接写表格/图表**"""import pandas as pd
import numpy as np
import altair as altdf = pd.DataFrame(np.random.randn(200, 3),columns=['a', 'b', 'c'])c = alt.Chart(df).mark_circle().encode(x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])st.write(c)

1.3 直接写代码

"""**1.3 直接写代码**"""
code = '''def hello():print("Hello, Streamlit!")'''
st.code(code, language='python')

2 数据展示 - Display data

""" # 2 数据展示 - Display data其中主函数:
- 展示dataframe: `streamlit.dataframe(data=None, width=None, height=None)`
- 展示json : `st.json`"""df = pd.DataFrame(np.random.randn(50, 20),columns=('col %d' % i for i in range(20)))st.dataframe(df)  # Same as st.write(df)""" 可以规定显示多少行列 - (width,height) """
st.dataframe(df, 200, 100)""" `st.dataframe`显示数据集 """
df = pd.DataFrame(np.random.randn(10, 20),columns=('col %d' % i for i in range(20)))st.dataframe(df.style.highlight_max(axis=0))""" `st.table`显示数据集 """
df = pd.DataFrame(np.random.randn(10, 5),columns=('col %d' % i for i in range(5)))st.table(df)""" `st.json`以json的形式展示 """
st.json({'foo': 'bar','baz': 'boz','stuff': ['stuff 1','stuff 2','stuff 3','stuff 5',],})

3 图表展示

""" # 3 图表展示- 直线图: `streamlit.line_chart(data=None, width=0, height=0, use_container_width=True)`
- 面积图: `streamlit.area_chart(data=None, width=0, height=0, use_container_width=True)`
- 柱状图: `streamlit.bar_chart(data=None, width=0, height=0, use_container_width=True)`
- 气泡图: `streamlit.altair_chart(altair_chart, use_container_width=False)`
- 气泡图2: `streamlit.altair_chart(altair_chart, use_container_width=False)`
- pyplot所有的图表:`streamlit.vega_lite_chart(data=None, spec=None, use_container_width=False, **kwargs)`
- plotly所有的图表: `streamlit.plotly_chart(figure_or_data, use_container_width=False, sharing='streamlit', **kwargs)`
- 逻辑导图 `streamlit.graphviz_chart(figure_or_dot, use_container_width=False)`
- 地图 `streamlit.map(data=None, zoom=None, use_container_width=True)`

需要安装一下:

pip install --pre plotly -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install --pre graphviz -i https://pypi.tuna.tsinghua.edu.cn/simple

参考url:
https://docs.streamlit.io/en/stable/api.html#display-charts

3.1 `st.line_chart`直线图

chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])st.line_chart(chart_data)

3.2 `st.area_chart`面积图

chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])st.area_chart(chart_data)

3.3 `st.bar_chart`柱状图

chart_data = pd.DataFrame(np.random.randn(50, 3),columns=["a", "b", "c"])st.bar_chart(chart_data)

3.4 `st.altair_chart`气泡图

df = pd.DataFrame(np.random.randn(200, 3),columns=['a', 'b', 'c'])c = alt.Chart(df).mark_circle().encode(x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])st.altair_chart(c, use_container_width=True)

3.5 `st.vega_lite_chart`气泡图2

df = pd.DataFrame(np.random.randn(200, 3),columns=['a', 'b', 'c'])st.vega_lite_chart(df, {'mark': {'type': 'circle', 'tooltip': True},'encoding': {'x': {'field': 'a', 'type': 'quantitative'},'y': {'field': 'b', 'type': 'quantitative'},'size': {'field': 'c', 'type': 'quantitative'},'color': {'field': 'c', 'type': 'quantitative'},},})

3.6 `pyplot`所有的图表

import matplotlib.pyplot as plt
import numpy as np
import plotly.figure_factory as ffarr = np.random.normal(1, 1, size=100)
fig, ax = plt.subplots()
ax.hist(arr, bins=20)st.pyplot(fig)

3.7 `plotly`所有图

# 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)

3.8 逻辑导图`graphviz_chart`

import streamlit as st
import graphviz as graphviz

# Create a graphlib graph object
graph = graphviz.Digraph()
graph.edge('run', 'intr')
graph.edge('intr', 'runbl')
graph.edge('runbl', 'run')
graph.edge('run', 'kernel')
graph.edge('kernel', 'zombie')
graph.edge('kernel', 'sleep')
graph.edge('kernel', 'runmem')
graph.edge('sleep', 'swap')
graph.edge('swap', 'runswap')
graph.edge('runswap', 'new')
graph.edge('runswap', 'runmem')
graph.edge('new', 'runmem')
graph.edge('sleep', 'runmem')st.graphviz_chart(graph)st.graphviz_chart('''digraph {run -> intrintr -> runblrunbl -> runrun -> kernelkernel -> zombiekernel -> sleepkernel -> runmemsleep -> swapswap -> runswaprunswap -> newrunswap -> runmemnew -> runmemsleep -> runmem}
''')

3.9 地图`map`

df = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])st.map(df)

4 Display media - 视频、音频

4.1 展示图片

from PIL import Image
image = Image.open(filepath + 'sunrise.jpg')st.image(image, caption='Sunrise by the mountains',use_column_width=True)

4.2 打开音频

audio_file = open(filepath + 'myaudio.ogg', 'rb')
audio_bytes = audio_file.read()st.audio(audio_bytes, format='audio/ogg')

4.3 打开视频

video_file = open(filepath + 'myvideo.mp4', 'rb')
video_bytes = video_file.read()st.video(video_bytes)

5 展示代码 - Display code

""" # 5 展示代码 - Display code`st.echo()`""" with st.echo():st.write('This code will be printed')

6 展示进度与状态 - 时间组件

6.1 按时间的进度`my_bar.progress`

my_bar = st.progress(0)for percent_complete in range(100):time.sleep(0.1)my_bar.progress(percent_complete + 1)

6.2 时间组件 - 进行中的标识

如果有一段代码在运行，那么可以使用这个，
在执行的时候会有"wait for it"的提示.

with st.spinner('Wait for it...'):time.sleep(5)
st.success('Done!')

6.3 进击的气球

有一排气球往上飞

st.balloons()

6.4 展示报错

st.error('This is an error')

python︱写markdown一样写网页，代码快速生成web工具：streamlit 展示组件（三）相关推荐

python︱写markdown一样写网页，代码快速生成web工具：streamlit 数据探索案例（六）
系列参考: python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一) python︱写markdown一样写网页,代码快速生成web工具:streamlit 重 ...
python︱写markdown一样写网页，代码快速生成web工具：streamlit 缓存（五）
系列参考: python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一) python︱写markdown一样写网页,代码快速生成web工具:streamlit 重 ...
python︱写markdown一样写网页，代码快速生成web工具：streamlit lay-out布局（四）
文章目录 1 `streamlit.beta_container()` 2 分列展示 3 按照比例分列展示 4 折叠/展开系列参考: python︱写markdown一样写网页,代码快速生成web工 ...
python︱写markdown一样写网页，代码快速生成web工具：streamlit 重要组件介绍（二）
python︱写markdown一样写网页,代码快速生成web工具:streamlit(一) 上篇主要是steamlit的介绍以及streamlit的一些初始化,这篇是一些组件的介绍,当然风格是直接上 ...
快速生成 web app 动态展示机器学习项目
1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点你不需要懂html, css, js等,纯python ...
EasyExcel 快速生成Excel工具的使用
EasyExcel 快速生成Excel工具的使用前言当我从数据库查询到数据,如何将它变成Excel表格的形式展示一个简单的导出模板如下导入依赖 & ...
Python 快速生成 web 动态展示机器学习项目！
来源丨网络作者丨wedo实验君 1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点你不需要懂html, ...
python网络爬虫之解析网页的正则表达式(爬取4k动漫图片)[三]
目录前言一.正则表达式的学习 1.正则表达式的匹配工具 2.正则表达式的样式 3.正则表达式的案例二.爬取网页图片 1.分析网页 2.获取数据爬取妹子网的案例后记前言 hello,大家好 ...
人人开源代码快速生成品牌管理的前后端基本代码
一点睛通过人人开源快速生成基本的前后端代码,以满足基本的增删改查,然后根据实际业务,去修改前面生成的基本代码,以满足实际业务需求. 二依赖表的结构 /*表: pms_brand*/------- ...

python︱写markdown一样写网页，代码快速生成web工具：streamlit 展示组件（三）

1 文本显示 display-text

1.0 各类文本展示

1.1 st.write`的各种写法

1.2 直接写表格/图表

1.3 直接写代码

2 数据展示 - Display data

3 图表展示

3.1 `st.line_chart`直线图

3.2 `st.area_chart`面积图

3.3 `st.bar_chart`柱状图

3.4 `st.altair_chart`气泡图

3.5 `st.vega_lite_chart`气泡图2

3.6 `pyplot`所有的图表

3.7 `plotly`所有图

3.8 逻辑导图`graphviz_chart`

3.9 地图`map`

4 Display media - 视频、音频

4.1 展示图片

4.2 打开音频

4.3 打开视频

5 展示代码 - Display code

6 展示进度与状态 - 时间组件

6.1 按时间的进度`my_bar.progress`

6.2 时间组件 - 进行中的标识

6.3 进击的气球

6.4 展示报错

python︱写markdown一样写网页，代码快速生成web工具：streamlit 展示组件（三）相关推荐

最新文章

热门文章

python︱写markdown一样写网页，代码快速生成web工具：streamlit 展示组件（三）

1 文本显示 display-text

1.0 各类文本展示

1.1 st.write`的各种写法

1.2 直接写表格/图表

1.3 直接写代码

2 数据展示 - Display data

3 图表展示

3.1 st.line_chart直线图

3.2 st.area_chart面积图

3.3 st.bar_chart柱状图

3.4 st.altair_chart气泡图

3.5 st.vega_lite_chart气泡图2

3.6 pyplot所有的图表

3.7 plotly所有图

3.8 逻辑导图graphviz_chart

3.9 地图map

4 Display media - 视频、音频

4.1 展示图片

4.2 打开音频

4.3 打开视频

5 展示代码 - Display code

6 展示进度与状态 - 时间组件

6.1 按时间的进度my_bar.progress

6.2 时间组件 - 进行中的标识

6.3 进击的气球

6.4 展示报错

python︱写markdown一样写网页，代码快速生成web工具：streamlit 展示组件（三）相关推荐

最新文章

热门文章

3.1 `st.line_chart`直线图

3.2 `st.area_chart`面积图

3.3 `st.bar_chart`柱状图

3.4 `st.altair_chart`气泡图

3.5 `st.vega_lite_chart`气泡图2

3.6 `pyplot`所有的图表

3.7 `plotly`所有图

3.8 逻辑导图`graphviz_chart`

3.9 地图`map`

6.1 按时间的进度`my_bar.progress`