Altair 多行工具提示

Question

使用以下数据框：

 #   Column                 Non-Null Count  Dtype  
---  ------                 --------------  -----  
 0   Unnamed: 0             428 non-null    int64  
 1   MatchID                428 non-null    int64  
 2   For Team               428 non-null    object 
 3   Against Team           428 non-null    object 
 4   Date                   428 non-null    object 
 5   GameWeek               428 non-null    int64  
 6   Home                   428 non-null    object 
 7   Possession             428 non-null    float64
 8   Touches                428 non-null    int64  
 9   Passes                 428 non-null    int64  
 10  Tackles                428 non-null    int64  
 11  Clearances             428 non-null    int64  
 12  Corners                428 non-null    int64  
 13  Offsides               428 non-null    int64  
 14  Fouls Committed        428 non-null    int64  
 15  Yellow Cards           428 non-null    int64  
 16  Goals                  428 non-null    int64  
 17  XG                     428 non-null    float64
 18  Shots On Target        428 non-null    int64  
 19  Total Shots            428 non-null    int64  
 ...
 35  Color                  428 non-null    object

我正在尝试遵循 Altair 示例库中的这个示例：

Multiline Tootip

这是我的代码：

# Create a selection that chooses the nearest point & selects based on x-value
nearest = alt.selection(type='single', nearest=True, on='mouseover',
                        fields=['GameWeek'], empty='none')

# The basic line
line = alt.Chart(df_teams_full_stats).mark_line(interpolate='basis').encode(
    x='GameWeek:Q',
    y='Goals:Q',
    color=alt.Color('Color', scale=None)
)

# Transparent selectors across the chart. This is what tells us
# the x-value of the cursor
selectors = alt.Chart(df_teams_full_stats).mark_point().encode(
    x='GameWeek:Q',
    opacity=alt.value(0),
).add_selection(
    nearest
)

# Draw points on the line, and highlight based on selection
points = line.mark_point().encode(
    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
)

# Draw text labels near the points, and highlight based on selection
text = line.mark_text(align='left', dx=5, dy=-5).encode(
    text=alt.condition(nearest, 'Goals:Q', alt.value(' '))
)

# Draw a rule at the location of the selection
rules = alt.Chart(df_teams_full_stats).mark_rule(color='gray').encode(
    x='GameWeek:Q',
).transform_filter(
    nearest
)

# Put the five layers into a chart and bind the data
chart = alt.layer(
    line, selectors, points, rules, text
).properties(
    width=1000, height=300
)

return chart

哪个地块：

点和它们应该位于其上的线之间存在偏移。我不明白为什么

问题：

我想将侧面的球队列表作为图例，并在鼠标悬停时将鼠标悬停在一个球队上（在侧面或线上本身）并增强其相应的线，如下所示：

这可能吗？怎么会？

Answer 1

如果您愿意单击图例而不是悬停鼠标，则可以在您的选择中设置 bind='legend'，如图库中的示例：

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

selection = alt.selection_multi(fields=['series'], bind='legend')

alt.Chart(source).mark_area().encode(
    alt.X('yearmonth(date):T', axis=alt.Axis(domain=False, format='%Y', tickSize=0)),
    alt.Y('sum(count):Q', stack='center', axis=None),
    alt.Color('series:N', scale=alt.Scale(scheme='category20b')),
    opacity=alt.condition(selection, alt.value(1), alt.value(0.2))
).add_selection(
    selection
)

'mouseover' 选项似乎还不适用于图例，因此如果您想要鼠标悬停，则需要创建一个单独的图表作为图例：

import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries()
s2 = pd.DataFrame(source.series.unique(), columns=['series'])
selection = alt.selection_multi(on='mouseover', fields=['series'], nearest=True)

chart = alt.Chart(source).mark_area().encode(
    alt.X('yearmonth(date):T', axis=alt.Axis(domain=False, format='%Y', tickSize=0)),
    alt.Y('sum(count):Q', stack='center', axis=None),
    alt.Color('series:N', scale=alt.Scale(scheme='category20b')),
    opacity=alt.condition(selection, alt.value(1), alt.value(0.2)))

hover_legend = alt.Chart(s2).mark_circle(size=100).encode(
    alt.Y('series:N', axis=alt.Axis(orient='right', domain=False, ticks=False), title=None),
    alt.Color('series:N', scale=alt.Scale(scheme='category20b'), legend=None),
    opacity=alt.condition(selection, alt.value(1), alt.value(0.2))
).add_selection(selection)

(chart | hover_legend).configure_view(strokeWidth=0)

Altair 多行工具提示

Altair Multi-Line Tooltip

python

pandas

altair