学习streamlit-5
系列目录
- 学习streamlit-1，简介
- 学习streamlit-2，st.write输出
- 学习streamlit-3，其它输出显示方法
- 学习streamlit-4，滑块
- 学习streamlit-5，图表
- 学习streamlit-6，选项框
- 学习streamlit-7，复选框
- 学习streamlit-8，组件
- 学习streamlit-9，密钥
- 学习streamlit-10，文件上传
- 学习streamlit-11，股票蜡烛图
- 学习streamlit-12，页面布局
- 学习streamlit-13，BMI计算应用
st.line_chart
今天继续学习streamlit，st.line_chart组件的使用。
st.line_chart用来显示折线图，它是st.altair_chart上的语法糖。主要区别在于此命令使用数据自己的列和索引来计算图表的规格。因此，这更容易用于许多“只是绘制此内容”方案，同时可定制性较低。
如果无法正确猜测数据特征，请尝试使用 st.altair_chart 指定所需的图表。
今天要构建的应用演示了以下流程：
- 通过pandas、numpy生成随机数组成的数据帧。
- 用折线图显示生成的数据帧。
demo
点击下方按钮进行在线演示和交互：
演示
显示效果：
代码
import streamlit as st
import pandas as pd
import numpy as npst.header('Line chart')chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])st.line_chart(chart_data)
逐行解释下上面的代码：
首先要做的依然是导入用到的python库：
import streamlit as st
import pandas as pd
import numpy as np
然后为图表创建标题：
st.header('Line chart')
生成一个包含3列20行随机数的数据帧并赋值给chart_data：
chart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])
最后，用折线图绘制数据：
st.line_chart(chart_data)
每次运行折线图都会有所不同，因为数据是随机生成的。
st.altair_chart
接下来进一步学习下st.line_chart背后的st.altair_chart组件，使用Altair库绘制各种图表。
作为简单示例，我们用与前文相同的方法生成数据，并以散点图的形式显示：
demo
点击下方按钮进行在线演示：
演示
运行效果：
代码
import streamlit as st
import pandas as pd
import numpy as np
import altair as altchart_data = pd.DataFrame(np.random.randn(20, 3),columns=['a', 'b', 'c'])c = alt.Chart(chart_data).mark_circle().encode(x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])st.altair_chart(c, use_container_width=True)
首先导入了必要的库：Streamlit、Pandas、NumPy、Altair。然后使用 Pandas 生成一个 DataFrame，包含 20 行、3 列随机数。
接下来使用 Altair 创建了一个散点图，图中横轴为 DataFrame 的第一列（‘a’），纵轴为第二列（‘b’），点的大小和颜色都由第三列（‘c’）的值确定，鼠标悬停在图上时会显示三列数据的具体数值。
最后使用 Streamlit 的 altair_chart 函数将图表展示在网页中，use_container_width=True 参数将图表宽度自适应网页宽度。用户可以使用 Streamlit 运行这个应用，并在页面上交互地探索数据。
主题
默认情况下，Altair 图表使用streamlit主题显示。这个主题时尚、用户友好，并结合了 Streamlit 的调色板。额外的好处是，你的图表可以更好地与应用的其余部分集成。
Streamlit 主题从 Streamlit 1.16.0 开始可以通过关键字参数获得。要禁用它并使用 Altair 的原生主题，请修改theme="streamlit"为theme=None。
让我们看一个具有 Streamlit 主题和原生 Altair 主题的图表示例，可以点击下面交互式应用程序的选项卡切换主题：
默认streamlit主题：
原生altair主题：
了解更多Altair图表示例。
以上示例的代码：
import altair as alt
from vega_datasets import datasource = data.cars()chart = alt.Chart(source).mark_circle().encode(x='Horsepower',y='Miles_per_Gallon',color='Origin',
).interactive()tab1, tab2 = st.tabs(["Streamlit theme (default)", "Altair native theme"])with tab1:# Use the Streamlit theme.# This is the default. So you can also omit the theme argument.st.altair_chart(chart, theme="streamlit", use_container_width=True)
with tab2:# Use the native Altair theme.st.altair_chart(chart, theme=None, use_container_width=True)