1 前言

在上一篇博文《 Streamlit 講解專欄（十）：數(shù)據(jù)可視化-圖表繪制詳解（上）》中，我們學習了一些關于數(shù)據(jù)可視化的基礎知識，探索了Streamlit庫中的幾個常見圖表繪制函數(shù)，包括st.line_chart、st.area_chart、st.bar_chart和st.pyplot。通過這些函數(shù)，我們可以輕松地繪制不同類型的圖表，使數(shù)據(jù)更加直觀。

在本篇文章中，我們將繼續(xù)討論Streamlit庫的圖表繪制功能，并重點介紹st.altair_chart函數(shù)。相較于前文中提到的函數(shù)，st.altair_chart提供了更高級的可視化能力和自定義選項。通過st.altair_chart，我們能夠更加靈活地展示數(shù)據(jù)，并以交互式的方式呈現(xiàn)圖表。

接下來的章節(jié)中，我們將深入研究st.altair_chart函數(shù)的使用方法和各種參數(shù)的應用。通過實際示例，我們將學習如何繪制交互式和高質(zhì)量的圖表，并探索常見的數(shù)據(jù)可視化技巧，以增強圖表的表達能力。閱讀本文后，您將更加熟練地運用st.altair_chart函數(shù)，用數(shù)據(jù)可視化的方式更好地傳達和分析技術見解。

現(xiàn)在，讓我們直接進入正題，一同探索st.altair_chart函數(shù)的強大之處吧！

2 繪制交互式散點圖

在本章中，我們將學習如何使用st.altair_chart函數(shù)繪制交互式散點圖。散點圖是一種常用的數(shù)據(jù)可視化方式，可以用于展示兩個變量之間的關系。我們將使用Altair庫來構(gòu)建散點圖，并利用st.altair_chart函數(shù)將圖表嵌入到Streamlit應用程序中。

首先，我們需要導入所需的庫和模塊：

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

接下來，我們創(chuàng)建一些隨機數(shù)據(jù)作為示例數(shù)據(jù)。代碼如下：

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

在這個例子中，我們生成了一個包含20行3列的隨機數(shù)據(jù)，列名分別為"a"、“b"和"c”。

然后，我們使用Altair庫創(chuàng)建一個基本的散點圖對象。代碼如下：

c = alt.Chart(chart_data).mark_circle().encode(
    x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])

在這個例子中，我們使用.mark_circle()方法指定散點圖的形狀為圓。通過.encode()方法，我們將數(shù)據(jù)的"a"列映射到x軸，"b"列映射到y(tǒng)軸，“c"列映射到點的大小和顏色。此外，我們還指定了tooltip選項，當鼠標懸停在圖表上時，會顯示"a”、"b"和"c"三個列的值。

最后，我們使用st.altair_chart函數(shù)將圖表嵌入到Streamlit應用程序中。代碼如下：

st.altair_chart(c, use_container_width=True)

在此處，我們將散點圖對象"c"傳遞給st.altair_chart函數(shù)，并設置use_container_width參數(shù)為True，使圖表的寬度與頁面寬度自適應。

現(xiàn)在，您可以運行整個程序，查看生成的交互式散點圖。圖表將在Streamlit應用程序中顯示，并且您可以通過鼠標懸停在散點上查看具體數(shù)值。

通過本例，我們熟悉了使用st.altair_chart函數(shù)繪制交互式散點圖的基本流程。在實際應用中，您可以根據(jù)需要調(diào)整圖表的顏色、大小、標簽等屬性，以使圖表更符合您的需求。

3 定制圖表主題

在本章中，我們將學習如何自定義圖表主題，以及如何在Streamlit應用程序中應用不同的主題樣式。

在Altair中，通過使用不同的主題，您可以為您的圖表賦予不同的外觀和感覺。默認情況下，Altair圖表使用Streamlit的主題進行顯示。這種主題具有時尚、用戶友好的特點，并與Streamlit應用程序的設計風格融為一體。

您可以通過將theme參數(shù)設置為"streamlit"來使用Streamlit主題。這使得應用程序中的圖表與其他組件更好地整合到一起。如果您希望使用Altair的原生主題而不是Streamlit主題，可以使用theme=None。

讓我們來看一個示例，展示了使用Streamlit主題和Altair原生主題繪制的圖表：

import altair as alt
from vega_datasets import data

# 載入數(shù)據(jù)集
source = data.cars()

# 創(chuàng)建散點圖對象
chart = alt.Chart(source).mark_circle().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
).interactive()

# 創(chuàng)建標簽
tab1, tab2 = st.tabs(["Streamlit主題（默認）", "Altair原生主題"])

with tab1:
    # 使用Streamlit主題，默認情況下即可。你也可以省略theme參數(shù)。
    st.altair_chart(chart, theme="streamlit", use_container_width=True)
with tab2:
    # 使用Altair原生主題
    st.altair_chart(chart, theme=None, use_container_width=True)

上述示例創(chuàng)建了一個包含兩個選項卡的應用程序界面，分別展示了啟用Streamlit主題和禁用Streamlit主題后的圖表。您可以通過點擊選項卡來查看兩種主題下的圖表樣式。

此外，即使啟用了Streamlit主題，您仍然可以對圖表進行自定義配置。例如，您可以通過更改顏色或字體等方式來覆蓋默認的主題設置。以下是一個示例：

import altair as alt
import streamlit as st
from vega_datasets import data

source = data.seattle_weather()

scale = alt.Scale(
    domain=["sun", "fog", "drizzle", "rain", "snow"],
    range=["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"],
)
color = alt.Color("weather:N", scale=scale)

# 創(chuàng)建兩個選擇器：
# - 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", title="Date"),
        alt.Y(
            "temp_max:Q",
            title="Maximum Daily Temperature (C)",
            scale=alt.Scale(domain=[-5, 40]),
        ),
        color=alt.condition(brush, color, alt.value("lightgray")),
        size=alt.Size("precipitation:Q", scale=alt.Scale(range=[5, 200])),
    )
    .properties(width=550, height=300)
    .add_selection(brush)
    .transform_filter(click)
)

# 底部面板是天氣類型的柱狀圖
bars = (
    alt.Chart()
    .mark_bar()
    .encode(
        x="count()",
        y="weather:N",
        color=alt.condition(click, color, alt.value("lightgray")),
    )
    .transform_filter(brush)
    .properties(
        width=550,
    )
    .add_selection(click)
)

chart = alt.vconcat(points, bars, data=source, title="Seattle Weather: 2012-2015")

tab1, tab2 = st.tabs(["Streamlit主題（默認）", "Altair原生主題"])

with tab1:
    st.altair_chart(chart, theme="streamlit", use_container_width=True)
with tab2:
    st.altair_chart(chart, theme=None, use_container_width=True)

通過查看上述示例，您可以發(fā)現(xiàn)自定義的顏色在啟用Streamlit主題時仍然有效。

4 增強數(shù)據(jù)可視化的交互性與注釋

Altair還允許你使用文本、圖像和表情符號為圖表添加注釋。你可以通過創(chuàng)建分層圖表來實現(xiàn)這一點，分層圖表允許將兩個不同的圖表疊加在一起。其思想是使用第一個圖表顯示數(shù)據(jù)，第二個圖表顯示注釋。然后，使用運算符加法創(chuàng)建一個分層圖表，將第二個圖表疊加在第一個圖表上。

讓我們通過一個示例來演示如何在時間序列圖表中添加文本和表情符號的注釋。

步驟1

創(chuàng)建基礎圖表 在這個示例中，我們創(chuàng)建一個時間序列圖表來跟蹤股票價格的演變。該圖表是交互式的，并包含一個多行提示框。首先，我們導入所需的庫，并使用vega_datasets包加載示例股票數(shù)據(jù)集：

import altair as alt
import pandas as pd
import streamlit as st
from vega_datasets import data

# 使用 @st.cache_data 使數(shù)據(jù)集保持在緩存中
@st.cache_data
def get_data():
    source = data.stocks()
    source = source[source.date.gt("2004-01-01")]
    return source
    
source = get_data()

以上代碼使用了vega_datasets庫中的stocks數(shù)據(jù)集作為示例數(shù)據(jù)。數(shù)據(jù)集獲取自2004年1月1日之后的數(shù)據(jù)。

請注意，我們使用了@st.cache_data裝飾器對獲取數(shù)據(jù)的函數(shù)進行了緩存，這樣可以提高數(shù)據(jù)訪問的性能。

接下來，我們定義一個函數(shù)來創(chuàng)建具有多行提示框的交互式股票價格時間序列圖表。 x軸表示日期，y軸表示股票價格。定義如下函數(shù)：

def get_chart(data):
    hover = alt.selection_single(
        fields=["date"],
        nearest=True,
        on="mouseover",
        empty="none",
    )

    lines = (
        alt.Chart(data, title="Evolution of stock prices")
        .mark_line()
        .encode(
            x="date",
            y="price",
            color="symbol",
        )
    )

    # Draw points on the line, and highlight based on selection
    points = lines.transform_filter(hover).mark_circle(size=65)

    # Draw a rule at the location of the selection
    tooltips = (
        alt.Chart(data)
        .mark_rule()
        .encode(
            x="yearmonthdate(date)",
            y="price",
            opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
            tooltip=[
                alt.Tooltip("date", title="Date"),
                alt.Tooltip("price", title="Price (USD)"),
            ],
        )
        .add_selection(hover)
    )
    return (lines + points + tooltips).interactive()

chart = get_chart(source)

上述代碼定義了一個名為get_chart的函數(shù)，它接受股票價格的數(shù)據(jù)集作為輸入，并返回一個圖表對象。這將是我們在步驟2中覆蓋注釋的基礎圖表。

函數(shù)中的hover定義了一個選擇集，用于鼠標懸停時確定最接近的日期。lines部分創(chuàng)建了一條線圖，其中x軸表示日期，y軸表示股票價格，而顏色表示不同的股票。points部分在線圖上繪制了一些點，并根據(jù)選擇進行高亮顯示。tooltips部分創(chuàng)建了一個規(guī)則線，根據(jù)選擇的日期位置顯示提示信息。

函數(shù)的最后一行將所有的圖表組合在一起，并啟用交互式功能。

通過調(diào)用get_chart(source)，我們得到了一個基礎圖表對象chart，后續(xù)我們將在步驟2中在此基礎上添加注釋。

步驟二

現(xiàn)在我們已經(jīng)有了顯示數(shù)據(jù)的第一個圖表，我們可以使用文本和表情符號來為其添加注釋。讓我們在時間序列圖表上疊加?? 表情符號，以表示感興趣的特定點。我們希望用戶將鼠標懸停在? 表情符號上時，能夠看到相關的注釋文本。

為了簡單起見，我們在特定的日期上添加了四個注釋，并將注釋的高度設置為固定值0.10。

首先，我們創(chuàng)建一個包含日期、注釋文本和注釋高度的數(shù)據(jù)幀annotations_df：

ANNOTATIONS = [
    ("Mar 01, 2008", "Pretty good day for GOOG"),
    ("Dec 01, 2007", "Something's 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的列表，其中包含日期和注釋文本。然后，我們將此列表轉(zhuǎn)換為一個數(shù)據(jù)框annotations_df，并將日期列轉(zhuǎn)換為日期時間類型。同時，我們在數(shù)據(jù)框中添加了一個名為 y 的注釋高度列，值為10。

接下來，我們使用此數(shù)據(jù)框創(chuàng)建一個散點圖，其中x軸表示日期，y軸表示注釋的高度。具體日期和高度處的數(shù)據(jù)點使用Altair的mark_text()方法表示為? 表情符號。

當用戶將鼠標懸停在? 表情符號上時，注釋文本將顯示為一個工具提示。我們使用Altair的encode()方法將注釋文本列映射到圖表的?屬性。

annotation_layer = (
    alt.Chart(annotations_df)
    .mark_text(size=20, text="?", dx=-8, dy=-10, align="left")
    .encode(
        x="date:T",
        y=alt.Y("y:Q"),
        tooltip=["event"],
    )
    .interactive()
)

最后，我們使用運算符加法將注釋疊加在基礎圖表上，創(chuàng)建最終的分層圖表。

st.altair_chart(
    (chart + annotation_layer).interactive(),
    use_container_width=True
)

上述代碼使用st.altair_chart()函數(shù)將注釋圖層疊加在基礎圖表上，并啟用交互功能。

這樣，我們就在基礎圖表上添加了注釋圖層，最終得到了一個分層圖表，同時顯示了數(shù)據(jù)和注釋。

5 結(jié)語

本篇博文中，我們深入探討了Streamlit庫中的圖表繪制功能，并重點介紹了st.altair_chart函數(shù)。通過學習st.altair_chart的使用方法和各種參數(shù)的應用，我們學習了如何繪制交互式散點圖，并了解了如何定制圖表主題，增強數(shù)據(jù)可視化的交互性和注釋。

通過本文的學習，我們已經(jīng)掌握了使用st.altair_chart函數(shù)進行數(shù)據(jù)可視化的基本技巧，并且能夠根據(jù)需求定制圖表的主題和增強其交互性與注釋。數(shù)據(jù)可視化是一個強大的工具，可以幫助我們更好地理解和傳達數(shù)據(jù)，提供見解和決策支持。

感謝您閱讀本篇博文，并希望這些內(nèi)容能為您在數(shù)據(jù)可視化方面的學習和應用提供幫助。在您今后的數(shù)據(jù)分析和傳達工作中，不斷探索和應用數(shù)據(jù)可視化的技巧，并將其發(fā)揮到最大的潛力上。

如果您對本篇博文有任何疑問或建議，請隨時告知，我將竭誠為您解答和改進。祝您在數(shù)據(jù)可視化的旅程中取得更多的成功！

文章來源地址http://www.zghlxwxcb.cn/news/detail-685252.html

到了這里，關于Streamlit 講解專欄（十一）：數(shù)據(jù)可視化-圖表繪制詳解（中）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！