Altair图表标记_文字背景颜色/视觉清晰度

Question

我一直在 Streamlit 的背景下使用 Altair 图表来制作简单的计算器。在一种情况下，我想绘制 3 个并排的条形图，以解释累进税级如何运作。

一列是总收入，下一列是在括号的起点和该括号的支付点之间绘制的条形。最后，我将所有这些间隔叠加在一起，得出所欠税款总额。

我想不出一个好方法来帮助“总欠款”数字不与网格线产生视觉冲突。部分原因是我无法找到一种好方法将图表的渲染大小与字体大小相关联，以对重叠进行条件检查。我还相信没有办法控制每列网格线的渲染。

理想情况下，我希望保持网格线粗且可见，而不干扰文本。我可以将该列的文本放置在堆叠条内，但对于某些配置，彩色条使文本同样难以阅读。

这是 MRE：

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

# Example data
data = pd.DataFrame({
    'category': ['A', 'B', 'C', 'D'],
    'value': [10, 20, 15, 25]
})

# Base chart with gridlines
chart = alt.Chart(data).mark_bar().encode(
    x='value:Q',
    y=alt.Y('category:N', axis=alt.Axis(grid=True, gridWidth=2, gridColor='darkslategray'))
)

text = alt.Chart(data).mark_text(
    align='left',
    baseline='middle',
    color='black'
).encode(
    x='value:Q',
    y='category:N',
    text=alt.Text('value:Q')
)

# Combine the charts
final_chart = chart + text

st.altair_chart(final_chart)

我尝试使用

mark_rect

作为文本背景，将此片段添加到上面：

# Text with background
text_background = alt.Chart(data).mark_rect(
    color='black',
    opacity=0.7,
    height=20,
    width=20
).encode(
    x='value:Q',
    y='category:N'
)

并更新最终图表的构成。然而，这些矩形以条形的末端为中心，并且（再次）无法将图表的大小和文本字体大小联系起来，我没有看到一种直接的方法将其置于文本的中心（或者甚至设置适当的宽度根据其宽度覆盖整个文本）。

有方便的方法吗？如果做不到这一点，我可以使用其他图表库吗？

Answer 1

我认为你关于背景矩形的想法会起作用。您可以像对齐文本一样对齐它：

# Base chart with gridlines
base = alt.Chart(data).mark_bar().encode(
    x='value:Q',
    y=alt.Y('category:N').axis(grid=True, gridWidth=2, gridColor='darkslategray')
)

text = base.mark_text(
    align='left',
    dx=2,
    color='black'
).encode(
    text=alt.Text('value:Q')
)

text_bg = base.mark_rect(
    color='white',
    height=20,
    width=20,
    align='left'
)

base + text_bg + text

如果您想尝试将文本覆盖在不同颜色的条上，您可以根据条背景颜色的亮度有条件地设置文本颜色，如下所示 https://github.com/vega/altair/pull/ 3614