给Altair图表添加背景填充颜色

Question

我非常喜欢Altair在Python中制作图表。为了致敬，我想重新生成《经济学人》的图表（如"Mistakes, we’ve drawn a few"所示）： 这是第一次尝试的代码：

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

 df = pd.read_csv('http://infographics.economist.com/databank/Economist_corbyn.csv').dropna()

 bars = alt.Chart(df, title="Average number of likes per Facebook post").mark_bar().
    encode(
        y=alt.Y('Page:O', axis=alt.Axis(title=''),
        sort=alt.EncodingSortField(
           field="Average number of likes per Facebook post 2016:Q",  # The field to use for the sort
           op="sum",  # The operation to run on the field prior to sorting
           order="ascending"  # The order to sort in
       )),
       color=alt.value("#116EA1"),
       x=alt.X("Average number of likes per Facebook post 2016:Q", 
       axis=alt.Axis(title='Average number of likes per Facebook post')),
)


text = bars.mark_text(
    align='left',
    baseline='middle',
    dx=3,  # Nudges text to right so it doesn't appear on top of the bar,
).encode(
    text='Average number of likes per Facebook post 2016:Q'
)

(bars+text).configure_title(fontSize=14)

四个问题：

1. 如何使用纯色 ##D9E9F0 填充背景？
2. 如何使第一行突出显示（通过在粗体标签“Jeremy Corbyn”上添加框）？
3. 我可以在左下角使用新版Altair文本图层功能添加浅灰色版权声明吗？如果可以，怎么做？
4. 如何将x轴刻度放在图形顶部？

感谢您的帮助！

更新（1）和（4）的答案来自jakevdp和aberna：

df['x'] = df['Average number of likes per Facebook post 2016']/1000.0
bars = alt.Chart(
    df, title="Average number of likes per Facebook post ('000)"
).mark_bar().encode(
    y=alt.Y('Page:O', axis=alt.Axis(title=''),
           sort=alt.EncodingSortField(
            field="Average number of likes per Facebook post 2016:Q",  # The field to use for the sort
            op="sum",  # The operation to run on the field prior to sorting
            order="ascending"  # The order to sort in
        )),
    color=alt.value("#116EA1"),
    x=alt.X("x:Q", 
            axis=alt.Axis(title='', orient="top"),
            scale=alt.Scale(round=True, domain=[0,5])),
)

bars.configure_title(fontSize=14).configure(background='#D9E9F0')

- cast42

Answer 1

回答您的问题：您可以使用 configure(background="colorname") 添加背景。例如：

(bars+text).configure_title(fontSize=14).configure(background='#DDEEFF')

- jakevdp

---

太简单了！很抱歉我自己找不到。非常感谢。 - cast42

稍微有点埋藏，但确实存在（我不得不再次确认）- https://altair-viz.github.io/user_guide/configuration.html#config-chart - TickboxPhil

Answer 2

回答你的第四个问题，你需要在alt.Axis中使用orient="top"参数。最初的回答。

axis=alt.Axis(title='Average number of likes per Facebook post',orient="top"))

- aberna

---

非常感谢。我们正在接近目标。 - cast42

Answer 3

回答第二个问题，不是突出显示条形图，而是通过条件字体样式突出显示标签。

label_style = {
    "condition": [{"test" : "datum.value == 'Jeremy Corbyn'", "value": "bold"}],
    "value": "italic"
}

...

y=alt.Y("Page:N", axis=alt.Axis(title="", labelFontStyle=label_style))

- tnagel

---

是的，谢谢你的回答。更简洁的写法如下： axis=alt.Axis(labelFontSize=14, labelFontStyle=alt.condition('datum.value == "Jeremy Corbyn"', alt.value('bold'), alt.value('italic')) - cast42

好主意！我从我的代码中复制了更长的版本，那里有多个不同样式的高亮显示。 - tnagel