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.html    android amap 移动地图mark不动_数据可视化之Altair(一)--概览（地图可视化）_易烫YCC的博客-CSDN博客

https://docs.streamlit.io/  streamlit文档

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删