Streamlit中用altair实现 条形图 高亮显示 要查询的名字

先上效果：

高亮显示 要查询的元素 在 哪一个序列中

 Streamlit能够很方便地调用Altair库，实现在网页看数据的功能。

Altair本身可以很好地调用pandas，作为显示信息的原始数据。

要实现上面的功能，分三步：

目录

1.获得pandas形式的数据。

2.用altair作图。

3.在streamlit中显示。

---

1.获得pandas形式的数据。

首先需要用pandas将数据转化为这种形式：

2.用altair作图。

整体思路是如果要查询的学生所属的班级是某一个班，则按第一种显示方式，如果要查询的学生表中没有，则正常显示所有班级。

def toBarChart(dfData,stuName):
    #将dfData转化成条形图 dfData是dataframe格式，stuName是要查找的学生姓名字符串
    dfBase = dataTo.getBaseDf()
    x='班级'

    classNameList = dfData['班级'].tolist()                       #班级名称列表
    nameList = dfBase['姓名'].values.tolist()                     #将姓名列转化成列表
    if stuName in nameList:                                     #如果 查找的姓名在列表里
        stuClass = str(int(dfBase.loc[dfBase['姓名'] == stuName, x].values))  # 获取查找的stuName这位学生的班级
        stuClassStr = stuClass + '班'
        st.write(stuClassStr)
        colorPara = alt.condition(
                        alt.datum[x] ==stuClassStr,                       #此处字符串判断是否相同
                        alt.value('red'),                               #若符合条件，显示这个颜色
                        alt.value('steelblue')                              #若不符合条件 则显示这个颜色
                    )
        altairClass = alt.Chart(dfData).mark_bar().encode(
            x=alt.X('班级', sort=classNameList),                      #x轴是班级，同时排序的时候强制按1-10班进行排序
            y='人数',
            color = colorPara
            ).properties(title='班级人数统计')
        altairClass = altairClass.configure_axisX(labelAngle=0)  # 标签旋转角度，保证x轴标签横向显示
    else:
        altairClass = alt.Chart(dfData).mark_bar().encode(
            x=alt.X('班级', sort=classNameList),  # x轴是班级，同时排序的时候强制按1-10班进行排序
            y='人数').properties(title='班级人数统计')
        altairClass = altairClass.configure_axisX(labelAngle=0)  # 标签旋转角度，保证x轴标签横向显示
    return altairClass

上述函数中，dfBase获得的，就是原始数据的dataframe，如图：

3.在streamlit中显示。

import streamlit as st

name = '王子'                    #要查询的学生名字是“王子”
k = dataTo.getClassStuCount()       #k是获得的班级、人数的dataframe，就是目录1里说的

barShow = toBarChart(k, name)    #用k和name作参数，获得altair的图
st.altair_chart(barShow, use_container_width=True)    #在streamlit中显示，宽度就用容器的默认宽度

#在终端运行 streamlit run test.py

显示效果如下：

当要查找的学生姓名没有在表格中时，则正常显示所有班级↑

 

当要查找的学生姓名在表格中时，显示其所在的班级，并高亮显示所在班级的颜色

        Altair其中一个优点是，图漂亮，和dataframe配合很快捷。不足之处是如果做稍微复杂一点的图，总是要用“+”来叠加两个图表。

参考资料：

altair4.2.0文档https://altair-viz.github.io/getting_started/overview.htmlandroid amap 移动地图mark不动_数据可视化之Altair(一)--概览（地图可视化）_易烫YCC的博客-CSDN博客

streamlit文档