学习streamlit-5_streamlit输出图表

系列目录

• 学习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 指定所需的图表。

今天要构建的应用演示了以下流程：

1. 通过pandas、numpy生成随机数组成的数据帧。
2. 用折线图显示生成的数据帧。

demo

点击下方按钮进行在线演示和交互：

演示

显示效果：

代码

import streamlit as st
import pandas as pd
import numpy as np

st.header('Line chart')

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

st.line_chart(chart_data)
1
2
3
4
5
6
7
8
9
10
11

逐行解释下上面的代码：

首先要做的依然是导入用到的python库：

import streamlit as st
import pandas as pd
import numpy as np
1
2
3

然后为图表创建标题：

st.header('Line chart')
1

生成一个包含3列20行随机数的数据帧并赋值给chart_data：

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

最后，用折线图绘制数据：

st.line_chart(chart_data)
1

每次运行折线图都会有所不同，因为数据是随机生成的。

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 alt

chart_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)
1
2
3
4
5
6
7
8
9
10
11
12
13

首先导入了必要的库：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 data

source = 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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

公众号 | FunIO
微信搜一搜 “funio”，发现更多精彩内容。