当前位置： 首页 > news >正文

广东网站建设哪家有,wordpress抓取,微信会员卡系统怎么做,做网站项目收获文章目录 1 前言2 绘制交互式散点图3 定制图表主题4 增强数据可视化的交互性与注释步骤1步骤二 5 结语 1 前言 在上一篇博文《 Streamlit 讲解专栏#xff08;十#xff09;#xff1a;数据可视化-图表绘制详解#xff08;上#xff09;》中#xff0c;我们学习了一些关… 文章目录 1 前言2 绘制交互式散点图3 定制图表主题4 增强数据可视化的交互性与注释步骤1步骤二 5 结语 1 前言 在上一篇博文《 Streamlit 讲解专栏十数据可视化-图表绘制详解上》中我们学习了一些关于数据可视化的基础知识探索了Streamlit库中的几个常见图表绘制函数包括st.line_chart、st.area_chart、st.bar_chart和st.pyplot。通过这些函数我们可以轻松地绘制不同类型的图表使数据更加直观。 在本篇文章中我们将继续讨论Streamlit库的图表绘制功能并重点介绍st.altair_chart函数。相较于前文中提到的函数st.altair_chart提供了更高级的可视化能力和自定义选项。通过st.altair_chart我们能够更加灵活地展示数据并以交互式的方式呈现图表。 接下来的章节中我们将深入研究st.altair_chart函数的使用方法和各种参数的应用。通过实际示例我们将学习如何绘制交互式和高质量的图表并探索常见的数据可视化技巧以增强图表的表达能力。阅读本文后您将更加熟练地运用st.altair_chart函数用数据可视化的方式更好地传达和分析技术见解。 现在让我们直接进入正题一同探索st.altair_chart函数的强大之处吧 2 绘制交互式散点图 在本章中我们将学习如何使用st.altair_chart函数绘制交互式散点图。散点图是一种常用的数据可视化方式可以用于展示两个变量之间的关系。我们将使用Altair库来构建散点图并利用st.altair_chart函数将图表嵌入到Streamlit应用程序中。 首先我们需要导入所需的库和模块 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])在这个例子中我们生成了一个包含20行3列的随机数据列名分别为a、“b和c”。 然后我们使用Altair库创建一个基本的散点图对象。代码如下 c alt.Chart(chart_data).mark_circle().encode(xa, yb, sizec, colorc, tooltip[a, b, c])在这个例子中我们使用.mark_circle()方法指定散点图的形状为圆。通过.encode()方法我们将数据的a列映射到x轴b列映射到y轴“c列映射到点的大小和颜色。此外我们还指定了tooltip选项当鼠标悬停在图表上时会显示a”、b和c三个列的值。 最后我们使用st.altair_chart函数将图表嵌入到Streamlit应用程序中。代码如下 st.altair_chart(c, use_container_widthTrue)在此处我们将散点图对象c传递给st.altair_chart函数并设置use_container_width参数为True使图表的宽度与页面宽度自适应。 现在您可以运行整个程序查看生成的交互式散点图。图表将在Streamlit应用程序中显示并且您可以通过鼠标悬停在散点上查看具体数值。 通过本例我们熟悉了使用st.altair_chart函数绘制交互式散点图的基本流程。在实际应用中您可以根据需要调整图表的颜色、大小、标签等属性以使图表更符合您的需求。 3 定制图表主题 在本章中我们将学习如何自定义图表主题以及如何在Streamlit应用程序中应用不同的主题样式。 在Altair中通过使用不同的主题您可以为您的图表赋予不同的外观和感觉。默认情况下Altair图表使用Streamlit的主题进行显示。这种主题具有时尚、用户友好的特点并与Streamlit应用程序的设计风格融为一体。 您可以通过将theme参数设置为streamlit来使用Streamlit主题。这使得应用程序中的图表与其他组件更好地整合到一起。如果您希望使用Altair的原生主题而不是Streamlit主题可以使用themeNone。 让我们来看一个示例展示了使用Streamlit主题和Altair原生主题绘制的图表 import altair as alt from vega_datasets import data# 载入数据集 source data.cars()# 创建散点图对象 chart alt.Chart(source).mark_circle().encode(xHorsepower,yMiles_per_Gallon,colorOrigin, ).interactive()# 创建标签 tab1, tab2 st.tabs([Streamlit主题默认, Altair原生主题])with tab1:# 使用Streamlit主题默认情况下即可。你也可以省略theme参数。st.altair_chart(chart, themestreamlit, use_container_widthTrue) with tab2:# 使用Altair原生主题st.altair_chart(chart, themeNone, use_container_widthTrue)上述示例创建了一个包含两个选项卡的应用程序界面分别展示了启用Streamlit主题和禁用Streamlit主题后的图表。您可以通过点击选项卡来查看两种主题下的图表样式。 此外即使启用了Streamlit主题您仍然可以对图表进行自定义配置。例如您可以通过更改颜色或字体等方式来覆盖默认的主题设置。以下是一个示例 import altair as alt import streamlit as st from vega_datasets import datasource data.seattle_weather()scale alt.Scale(domain[sun, fog, drizzle, rain, snow],range[#e7ba52, #a7a7a7, #aec7e8, #1f77b4, #9467bd], ) color alt.Color(weather:N, scalescale)# 创建两个选择器

- brush用于顶部面板的刷选

- click用于底部面板的多重点击

brush alt.selection_interval(encodings[x]) click alt.selection_multi(encodings[color])# 顶部面板是时间 vs 温度的散点图 points (alt.Chart().mark_point().encode(alt.X(monthdate(date):T, titleDate),alt.Y(temp_max:Q,titleMaximum Daily Temperature ©,scalealt.Scale(domain[-5, 40]),),coloralt.condition(brush, color, alt.value(lightgray)),sizealt.Size(precipitation:Q, scalealt.Scale(range[5, 200])),).properties(width550, height300).add_selection(brush).transform_filter(click) )# 底部面板是天气类型的柱状图 bars (alt.Chart().mark_bar().encode(xcount(),yweather:N,coloralt.condition(click, color, alt.value(lightgray)),).transform_filter(brush).properties(width550,).add_selection(click) )chart alt.vconcat(points, bars, datasource, titleSeattle Weather: 2012-2015)tab1, tab2 st.tabs([Streamlit主题默认, Altair原生主题])with tab1:st.altair_chart(chart, themestreamlit, use_container_widthTrue) with tab2:st.altair_chart(chart, themeNone, use_container_widthTrue)通过查看上述示例您可以发现自定义的颜色在启用Streamlit主题时仍然有效。 4 增强数据可视化的交互性与注释 Altair还允许你使用文本、图像和表情符号为图表添加注释。你可以通过创建分层图表来实现这一点分层图表允许将两个不同的图表叠加在一起。其思想是使用第一个图表显示数据第二个图表显示注释。然后使用运算符加法创建一个分层图表将第二个图表叠加在第一个图表上。 让我们通过一个示例来演示如何在时间序列图表中添加文本和表情符号的注释。 步骤1 创建基础图表 在这个示例中我们创建一个时间序列图表来跟踪股票价格的演变。该图表是交互式的并包含一个多行提示框。首先我们导入所需的库并使用vega_datasets包加载示例股票数据集 import altair as alt import pandas as pd import streamlit as st from vega_datasets import data# 使用 st.cache_data 使数据集保持在缓存中 st.cache_data def get_data():source data.stocks()source source[source.date.gt(2004-01-01)]return sourcesource get_data()以上代码使用了vega_datasets库中的stocks数据集作为示例数据。数据集获取自2004年1月1日之后的数据。 请注意我们使用了st.cache_data装饰器对获取数据的函数进行了缓存这样可以提高数据访问的性能。 接下来我们定义一个函数来创建具有多行提示框的交互式股票价格时间序列图表。 x轴表示日期y轴表示股票价格。定义如下函数 def get_chart(data):hover alt.selection_single(fields[date],nearestTrue,onmouseover,emptynone,)lines (alt.Chart(data, titleEvolution of stock prices).mark_line().encode(xdate,yprice,colorsymbol,))# Draw points on the line, and highlight based on selectionpoints lines.transform_filter(hover).mark_circle(size65)# Draw a rule at the location of the selectiontooltips (alt.Chart(data).mark_rule().encode(xyearmonthdate(date),yprice,opacityalt.condition(hover, alt.value(0.3), alt.value(0)),tooltip[alt.Tooltip(date, titleDate),alt.Tooltip(price, titlePrice (USD)),],).add_selection(hover))return (lines points tooltips).interactive()chart get_chart(source)上述代码定义了一个名为get_chart的函数它接受股票价格的数据集作为输入并返回一个图表对象。这将是我们在步骤2中覆盖注释的基础图表。 函数中的hover定义了一个选择集用于鼠标悬停时确定最接近的日期。lines部分创建了一条线图其中x轴表示日期y轴表示股票价格而颜色表示不同的股票。points部分在线图上绘制了一些点并根据选择进行高亮显示。tooltips部分创建了一个规则线根据选择的日期位置显示提示信息。 函数的最后一行将所有的图表组合在一起并启用交互式功能。 通过调用get_chart(source)我们得到了一个基础图表对象chart后续我们将在步骤2中在此基础上添加注释。 步骤二 现在我们已经有了显示数据的第一个图表我们可以使用文本和表情符号来为其添加注释。让我们在时间序列图表上叠加⬇️ 表情符号以表示感兴趣的特定点。我们希望用户将鼠标悬停在⬇ 表情符号上时能够看到相关的注释文本。 为了简单起见我们在特定的日期上添加了四个注释并将注释的高度设置为固定值0.10。 首先我们创建一个包含日期、注释文本和注释高度的数据帧annotations_df ANNOTATIONS [(Mar 01, 2008, Pretty good day for GOOG),(Dec 01, 2007, Somethings going wrong for GOOG AAPL),(Nov 01, 2008, Market starts again thanks to…),(Dec 01, 2009, Small crash for GOOG after…), ] annotations_df pd.DataFrame(ANNOTATIONS, columns[date, event]) annotations_df.date pd.to_datetime(annotations_df.date) annotations_df[y] 10上述代码定义了一个名为ANNOTATIONS的列表其中包含日期和注释文本。然后我们将此列表转换为一个数据框annotations_df并将日期列转换为日期时间类型。同时我们在数据框中添加了一个名为 y 的注释高度列值为10。 接下来我们使用此数据框创建一个散点图其中x轴表示日期y轴表示注释的高度。具体日期和高度处的数据点使用Altair的mark_text()方法表示为⬇ 表情符号。 当用户将鼠标悬停在⬇ 表情符号上时注释文本将显示为一个工具提示。我们使用Altair的encode()方法将注释文本列映射到图表的⬇属性。 annotation_layer (alt.Chart(annotations_df).mark_text(size20, text⬇, dx-8, dy-10, alignleft).encode(xdate:T,yalt.Y(y:Q),tooltip[event],).interactive() )最后我们使用运算符加法将注释叠加在基础图表上创建最终的分层图表。 st.altair_chart((chart annotation_layer).interactive(),use_container_widthTrue )上述代码使用st.altair_chart()函数将注释图层叠加在基础图表上并启用交互功能。 这样我们就在基础图表上添加了注释图层最终得到了一个分层图表同时显示了数据和注释。 5 结语 本篇博文中我们深入探讨了Streamlit库中的图表绘制功能并重点介绍了st.altair_chart函数。通过学习st.altair_chart的使用方法和各种参数的应用我们学习了如何绘制交互式散点图并了解了如何定制图表主题增强数据可视化的交互性和注释。 通过本文的学习我们已经掌握了使用st.altair_chart函数进行数据可视化的基本技巧并且能够根据需求定制图表的主题和增强其交互性与注释。数据可视化是一个强大的工具可以帮助我们更好地理解和传达数据提供见解和决策支持。 感谢您阅读本篇博文并希望这些内容能为您在数据可视化方面的学习和应用提供帮助。在您今后的数据分析和传达工作中不断探索和应用数据可视化的技巧并将其发挥到最大的潜力上。 如果您对本篇博文有任何疑问或建议请随时告知我将竭诚为您解答和改进。祝您在数据可视化的旅程中取得更多的成功