如何在 Altair python 中突出顯示多線圖

Question

我正在嘗試使用 Python 中的 Altair 模塊創建一個包含 20 多行數據的交互式時間序列圖表。

創建我正在查看的形狀的數據框的代碼在這里：

import numpy as np
import altair as alt
year = np.arange(1995, 2020)
day = np.arange(1, 91)

def gen_next_number(previous, limit, max_reached):
    if max_reached:
        return np.NAN, True
    increment = np.random.randint(0, 10)
    output = previous + increment
    if output >= 100:
        output = 100
        max_reached = True
    return output, max_reached

def gen_list():
    output_list = []
    initial = 0
    limit = 100
    max_reached = False
    value = 0 
    for i in range(1, 91):
        value, max_reached = gen_next_number(value, limit, max_reached)
        if max_reached:
            value = np.NAN 
        output_list.append(value)
    return output_list

df = pd.DataFrame(index = day, columns=year )
for y in year:
    data = gen_list()
    df[y] = data

df['day'] = df.index
df = df.melt("day")
df = df.dropna(subset=["value"])

我可以使用以下 Altair 代碼來生成初始圖，但它並不漂亮：

alt.Chart(df).mark_line().encode(
    x='day:N',
    color="variable:N",
    y='value:Q',
    tooltip=["variable:N", "value"]
)

但是當我嘗試使用此代碼創建交互式內容時，它失敗了：

highlight = alt.selection(type='single', on='mouseover',
                          fields='variable', nearest=True, empty="none")

alt.Chart(plottable).mark_line().encode(
    x='day:N',
    color="variable:N",
    y=alt.condition(highlight, 'value:Q', alt.value("lightgray")),
    tooltip=["variable:N", "value"]
).add_selection(
    highlight
)

它失敗並出現錯誤：

TypeError: sequence item 1: expected str instance, int found

有人可以幫我嗎？

另外，是否可以使圖例具有交互性？ 所以懸停在一年上會突出一條線？

Answer 1

兩個問題：

• 在alt.condition ，您需要提供字段列表，而不是單個字段
• y編碼不接受條件。 我懷疑你是要把條件塗上顏色。

有了這兩個修復程序，您的圖表即可工作：

highlight = alt.selection(type='single', on='mouseover',
                          fields=['variable'], nearest=True, empty="none")

alt.Chart(df).mark_line().encode(
    x='day:N',
    y='value:Q',
    color=alt.condition(highlight, 'variable:N', alt.value("lightgray")),
    tooltip=["variable:N", "value"]
).add_selection(
    highlight
)

由於選擇不會改變z順序，因此您會發現突出顯示的線通常隱藏在其他灰線的后面。 如果希望它彈出在前面，可以使用類似於https://stackoverflow.com/a/55796860/2937831中的方法

Answer 2

我想創建一個類似於上面的多線圖

• 沒有傳說
• 沒有懸停或鼠標懸停。

只想傳遞一個highlight_value並突出顯示一行。

我修改了代碼，因為我不太熟悉“選擇”的正確使用，並且認識到獲得我想要的結果有點笨拙。

有沒有更干凈的方法來做到這一點？

highlight = alt.selection(type='single', on='mouseover',
                          fields=['variable'], nearest=True, empty="none")

background = alt.Chart(df[df['variable'] != 1995]).mark_line().encode(
    x='day:N',
    y='value:Q',
    color=alt.condition( highlight, 'variable:N', alt.value("lightgray")),
    tooltip=["variable:N", "value"],
).add_selection(
    highlight
)


foreground = alt.Chart(df[df['variable'] == 1995]).mark_line(color= "blue").encode(
    x='day:N',
    y='value:Q',
    color=alt.Color('variable',legend=None)
)
foreground + background