定制可视化#

Altair 的目标是自动选择有用的图表设置和配置，以便用户可以专注于数据本身，而不是绘图的机制。话虽如此，一旦你有了有用的可视化图表，你通常会想要调整它的某些方面。文档的这一部分概述了一些进行这些调整的方法。

全局配置 vs. 局部配置 vs. 编码#

根据情况，通常有两种或三种不同的方式来指定图表的外观。例如，假设我们正在创建 cars 数据集的散点图

import altair as alt
from vega_datasets import data
cars = data.cars.url

alt.Chart(cars).mark_point().encode(
    x='Acceleration:Q',
    y='Horsepower:Q'
)

假设你想将点的颜色改为红色，并将点的不透明度改为 20%。有三种可能的方法来实现这些

“全局配置”作用于整个图表对象
“局部配置”作用于图表中的一个标记
“编码”通道也可用于设置一些图表属性

全局配置#

首先，每种图表类型在顶层都有一个 "config" 属性，它充当整个图表及其所有子图表的主题。在这里你可以指定轴属性、标记属性、选择属性等。

Altair 允许你通过图表的 configure_* 方法访问这些属性。这里我们将使用 configure_mark() 属性


alt.Chart(cars).mark_point().encode(
    x='Acceleration:Q',
    y='Horsepower:Q'
).configure_mark(
    opacity=0.2,
    color='red'
)





使用这种全局配置时需要注意以下几点

根据设计，配置将影响图表中使用到的所有标记
全局配置只允许在顶层使用；因此，例如，如果你尝试将上面的图表与另一个图表分层，将会导致错误。

关于全局配置选项的完整讨论，请参阅顶层图表配置。



局部配置#
如果你想局部配置标记的外观，使得设置仅影响你引用的特定图表属性，可以通过局部配置设置来实现。
对于标记属性，最好的方法是将属性设置为 mark_* 方法的参数。这里我们将使用 mark_point()

alt.Chart(cars).mark_point(opacity=0.2, color='red').encode(
    x='Acceleration:Q',
    y='Horsepower:Q'
)





与使用全局配置不同，这里可以将生成的图表用作复合图表中的一个层或分面。
像这样的局部配置设置总是会覆盖全局设置。


编码#
最后，可以通过编码通道设置图表属性（参见编码）。你可以不将属性映射到数据列，而是使用 value() 函数直接将属性映射到一个值

alt.Chart(cars).mark_point().encode(
    x='Acceleration:Q',
    y='Horsepower:Q',
    opacity=alt.value(0.2),
    color=alt.value('red')
)





注意，只有有限的一组标记属性可以绑定到编码，因此对于某些属性（例如 fillOpacity、strokeOpacity 等），编码方法不可用。
编码设置总是会覆盖局部或全局配置设置。


选择哪种方法？#
三种方法的优先级顺序是（从低到高）全局配置、局部配置、编码。也就是说，如果一个图表属性同时在全局和局部设置，局部设置将胜出。如果一个属性同时通过配置和编码设置，编码将胜出。
在大多数使用场景中，我们建议总是使用最高优先级的方法来设置属性；即编码，或者对于未绑定到编码的属性使用局部配置。全局配置应该保留用于创建主题，在图表渲染之前应用。



调整标题#
默认情况下，Altair 图表没有标题，如本例所示。
import altair as alt
from vega_datasets import data

iowa = data.iowa_electricity.url

alt.Chart(iowa).mark_area().encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack("normalize"),
    color="source:N"
)





你可以通过向数据传递 title 关键字参数来添加一个简单的标题。
alt.Chart(iowa, title="Iowa's green energy boom").mark_area().encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack("normalize"),
    color="source:N"
)





也可以通过传入一个 alt.Title 对象来添加副标题。
alt.Chart(
   iowa,
   title=alt.Title(
       "Iowa's green energy boom",
       subtitle="A growing share of the state's energy has come from renewable sources"
   )
).mark_area().encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack("normalize"),
    color="source:N"
)





副标题可以通过传递一个列表来实现两行，列表中的每个项就是一行（如果你不想像下面的例子那样手动创建这个列表，你可以使用 textwrap 库中的 wrap 函数将一个字符串分割成指定长度的子字符串列表）。
alt.Chart(
   iowa,
   title=alt.Title(
       "Iowa's green energy boom",
       subtitle=["A growing share of the state's energy", "has come from renewable sources"]
   )
).mark_area().encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack("normalize"),
    color="source:N"
)





Title 对象还可以配置许多其他属性，例如将其 anchor 到图表的 'start'（左侧），并将其 orient 到图表的 'bottom'（更多选项请参见顶层图表配置）。
alt.Chart(
   iowa,
   title=alt.Title(
       "Iowa's green energy boom",
       subtitle="A growing share of the state's energy has come from renewable sources",
       anchor='start',
       orient='bottom',
       offset=20
   )
).mark_area().encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack("normalize"),
    color="source:N"
)





在上面的图表中，你可以看到标题完全定位在左侧，与 y 轴上的标签对齐。你可以通过将锚点位置的参考 frame 设置为相对于 'group'（即图表的数据部分，不包括标签和标题）来将标题与轴线对齐。
alt.Chart(
   iowa,
   title=alt.Title(
       "Iowa's green energy boom",
       subtitle=["A growing share of the state's energy has come from", "renewable sources"],
       anchor='start',
       frame='group',
       orient='bottom',
       offset=20
   )
).mark_area().encode(
    x="year:T",
    y=alt.Y("net_generation:Q").stack("normalize"),
    color="source:N"
)







调整轴限制#
Altair 使用的默认轴限制取决于数据类型。要微调超出这些默认值的轴限制，可以使用轴编码的 scale() 方法。例如，考虑以下图表

import altair as alt
from vega_datasets import data

cars = data.cars.url

alt.Chart(cars).mark_point().encode(
    x='Acceleration:Q',
    y='Horsepower:Q'
)





Altair 继承了 Vega-Lite 的惯例，即在定量轴中始终包含零点；如果你想关闭此功能，可以在 X 编码中添加 scale() 方法并指定 zero=False

alt.Chart(cars).mark_point().encode(
    alt.X('Acceleration:Q').scale(zero=False),
    y='Horsepower:Q'
)





要指定精确的轴限制，可以使用比例尺的 domain 属性
alt.Chart(cars).mark_point().encode(
    alt.X('Acceleration:Q').scale(domain=(5, 20)),
    y='Horsepower:Q'
)





问题在于数据仍然存在于比例尺之外，我们需要告诉 Altair 如何处理这些数据。一种选择是通过将标记的 "clip" 属性设置为 True 来“剪裁”数据
alt.Chart(cars).mark_point(clip=True).encode(
    alt.X('Acceleration:Q').scale(domain=(5, 20)),
    y='Horsepower:Q'
)





另一种选择是“钳制”数据；也就是说，将超出限制的点移动到域的边缘
alt.Chart(cars).mark_point().encode(
    alt.X('Acceleration:Q').scale(domain=(5, 20), clamp=True),
    y='Horsepower:Q'
).interactive()





对于上面这样的交互式图表，钳制是动态发生的，这对于你在平移和缩放图表时记住异常值很有用。


调整轴标签#
Altair 还提供了轻松配置轴标签外观的工具。例如，考虑这个图表
import pandas as pd
df = pd.DataFrame(
    {'x': [0.03, 0.04, 0.05, 0.12, 0.07, 0.15],
    'y': [10, 35, 39, 50, 24, 35]
})

alt.Chart(df).mark_circle().encode(
    x='x',
    y='y'
)





要微调刻度标签的格式并为每个轴添加自定义标题，我们可以在 X 和 Y 编码的 axis() 方法中传递自定义轴定义。这里有一个将 x 标签格式化为百分比、y 标签格式化为美元值的示例

alt.Chart(df).mark_circle().encode(
    alt.X('x').axis(format='%').title('percentage'),
    alt.Y('y').axis(format='$').title('dollar amount')
)





轴标签可以轻松删除
alt.Chart(df).mark_circle().encode(
    alt.X('x').axis(labels=False),
    alt.Y('y').axis(labels=False)
)





轴标题也可以旋转
alt.Chart(df).mark_circle().encode(
    alt.X('x').axis(title="x"),
    alt.Y('y').axis(
        title="Y Axis Title",
        titleAngle=0,
        titleAlign="left",
        titleY=-2,
        titleX=0,
    )
)





提供了其他格式代码；有关这些代码的列表，请参阅 d3 格式代码文档。


调整图例#
当将 color、shape 或 size 参数传递给 encode() 函数时，图例会自动添加到图表中。在本例中，我们将使用 color。

import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color='species'
)





在这种情况下，可以通过引入 Color 类并利用其 legend() 方法来定制图例。shape 和 size 参数也有各自对应的类。

所有这些图例选项都期望一个 Legend 对象作为输入，该对象接受参数来自定义其外观的许多方面。一个例子是使用 orient 参数将图例移动到另一个位置。
import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color=alt.Color('species').legend(orient="left")
)





另一件可以做的事情是设置 title；在这种情况下，我们可以直接使用 title() 方法作为快捷方式，或者在 legend() 方法内部指定 title 参数:。

import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color=alt.Color('species').title("Species by color")
)





你可以通过提交 null 值来完全移除图例。
import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color=alt.Color('species').legend(None),
)







移除图表边框#
基本的 Altair 图表绘制时包含网格和外部边框。要创建一个无边框的图表，你需要同时移除它们。
例如，我们从一个简单的散点图开始。
import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color='species'
)





首先使用 configure_axis() 方法移除网格。

import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color='species'
).configure_axis(
    grid=False
)





你会注意到，虽然内部的网格线消失了，但外部边框仍然存在。通过在 configure_view() 中设置 stroke=None 来隐藏它（strokeWidth=0 和 strokeOpacity=0 也有效）

import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    x='petalWidth',
    y='petalLength',
    color='species'
).configure_axis(
    grid=False
).configure_view(
    stroke=None
)





还可以通过将上述选项与在编码时将 axis 设置为 None 结合，来完全移除所有边框和轴。
import altair as alt
from vega_datasets import data

iris = data.iris()

alt.Chart(iris).mark_point().encode(
    alt.X('petalWidth').axis(None),
    alt.Y('petalLength').axis(None),
    color='species'
).configure_axis(
    grid=False
).configure_view(
    stroke=None
)







定制颜色#
如数据类型对颜色比例尺的影响中所述，Altair 根据颜色编码的数据类型选择合适的默认配色方案。可以使用 Color 类的 scale() 方法来自定义这些默认设置。


配色方案#
Altair 包含由 vega 项目定义的一系列用于分类数据和顺序数据的命名配色方案；请参阅Vega 文档，以获取可用配色方案的完整图库。这些方案可以传递给 scale() 方法的 scheme 参数

import altair as alt
from vega_datasets import data

cars = data.cars()

alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color=alt.Color('Acceleration').scale(scheme="lightgreyred")
)





我们上面使用的配色方案突出了比例尺一端的数据点，而其余部分则保持柔和。如果想突出较低的 Acceleration 数据并将其显示为红色，可以使用 reverse 参数来反转配色方案
alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color=alt.Color('Acceleration').scale(scheme="lightgreyred", reverse=True)
)







颜色域与范围#
要创建自定义颜色比例尺，可以使用 scale 方法的 domain 和 range 参数，分别用于值和颜色。这适用于连续比例尺，可以帮助突出显示特定值范围
domain = [5, 8, 10, 12, 25]
range_ = ['#9cc8e2', '#9cc8e2', 'red', '#5ba3cf', '#125ca4']

alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color=alt.Color('Acceleration').scale(domain=domain, range=range_)
)





也适用于离散比例尺
domain = ['Europe', "Japan", "USA"]
range_ = ['seagreen', 'firebrick', 'rebeccapurple']

alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color=alt.Color('Origin').scale(domain=domain, range=range_)
)







原始颜色值#
scale 用于将原始输入值映射到合适的颜色编码以显示数据。如果你的数据条目包含原始颜色名称或代码，可以设置 scale(None) 以直接使用这些颜色
import pandas as pd
import altair as alt

data = pd.DataFrame({
    'x': range(6),
    'color': ['red', 'steelblue', 'chartreuse', '#F4D03F', '#D35400', '#7D3C98']
})

alt.Chart(data).mark_point(
    filled=True,
    size=100
).encode(
    x='x',
    color=alt.Color('color').scale(None)
)








调整条形标记的宽度#
条形图的条形宽度通过 mark_bar() 中的 size 属性控制

import altair as alt
import pandas as pd

data = pd.DataFrame({'name': ['a', 'b'], 'value': [4, 10]})

alt.Chart(data).mark_bar(size=10).encode(
    x='name:O',
    y='value:Q'
)





但是由于 mark_bar(size=10) 只控制条形的宽度，可能导致图表的总宽度没有相应调整
alt.Chart(data).mark_bar(size=30).encode(
    x='name:O',
    y='value:Q'
)





因此，通常更倾向于使用 Step 根据不同的类别数量来设置整个图表的宽度，你可以在后面的几个图表中看到一个示例。


调整图表大小#
图表的大小可以使用 width 和 height 属性进行调整。例如
import altair as alt
from vega_datasets import data

cars = data.cars()

alt.Chart(cars).mark_bar().encode(
    x='Origin',
    y='count()'
).properties(
    width=200,
    height=150
)





注意，在分面图或其他复合图表的情况下，此宽度和高度应用于子图表而非整个图表
alt.Chart(cars).mark_bar().encode(
    x='Origin',
    y='count()',
    column='Cylinders:Q'
).properties(
    width=100,
    height=100
).resolve_scale(
    x='independent'
)





要根据不同的类别数量更改图表大小，可以使用 Step 类来指定每个类别的宽度/高度，而不是整个图表
alt.Chart(cars).mark_bar().encode(
    x='Origin',
    y='count()',
    column='Cylinders:Q'
).properties(
    width=alt.Step(35),
    height=100
).resolve_scale(
    x='independent'
)





如果你希望图表大小响应其渲染所在的 HTML 页面或容器的宽度，可以将 width 或 height 设置为字符串 "container"
alt.Chart(cars).mark_bar().encode(
    x='Origin',
    y='count()',
).properties(
    width='container',
    height=200
)





请注意，这仅在其父元素的尺寸在图表外部确定时才会随容器缩放；例如，容器可能是一个样式为 width: 100%; height: 300px 的 <div> 元素。


图表主题#

注意
此内容在 Altair 5.5.0 版本发布时发生了显著变化。

Altair 提供了一个主题注册表，允许用户在任何 Python 会话中全局应用图表配置。altair.theme 模块提供了帮助函数来与注册表交互。
注册表中的每个主题都是一个函数，它定义一个规范字典，该字典将添加到每个创建的图表中。例如，默认主题配置了单个图表的默认大小
>>> import altair as alt
>>> default = alt.theme.get()
>>> default()
{'config': {'view': {'continuousWidth': 300, 'continuousHeight': 300}}}


你可以看到，你创建的任何图表都会应用此主题，并且这些配置会添加到其规范中
import altair as alt
from vega_datasets import data

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q'
)

chart.to_dict()


    {'config': {'view': {'continuousWidth': 300, 'continuousHeight': 300}}, 'data': {'url': 'https://cdn.jsdelivr.net.cn/npm/vega-datasets@v1.29.0/data/cars.json'}, 'mark': {'type': 'point'}, 'encoding': {'x': {'field': 'Horsepower', 'type': 'quantitative'}, 'y': {'field': 'Miles_per_Gallon', 'type': 'quantitative'}}, '$schema': 'https://vega.github.io/schema/vega-lite/v5.20.1.json'}


渲染后的图表将反映这些配置
chart






更改主题#
如果你想在你的 Python 会话期间启用其他主题，可以调用 altair.theme.enable()。例如，Altair 包含一个主题，其中图表背景是不透明的而不是透明的

alt.theme.enable('opaque')
chart.to_dict()


    {'config': {'background': 'white', 'view': {'continuousWidth': 300, 'continuousHeight': 300}}, 'data': {'url': 'https://cdn.jsdelivr.net.cn/npm/vega-datasets@v1.29.0/data/cars.json'}, 'mark': {'type': 'point'}, 'encoding': {'x': {'field': 'Horsepower', 'type': 'quantitative'}, 'y': {'field': 'Miles_per_Gallon', 'type': 'quantitative'}}, '$schema': 'https://vega.github.io/schema/vega-lite/v5.20.1.json'}


chart





注意，图表背景颜色现在设置为白色。如果你想让图表不应用任何主题，可以使用名为 'none' 的主题
alt.theme.enable('none')
chart.to_dict()


    {'data': {'url': 'https://cdn.jsdelivr.net.cn/npm/vega-datasets@v1.29.0/data/cars.json'}, 'mark': {'type': 'point'}, 'encoding': {'x': {'field': 'Horsepower', 'type': 'quantitative'}, 'y': {'field': 'Miles_per_Gallon', 'type': 'quantitative'}}, '$schema': 'https://vega.github.io/schema/vega-lite/v5.20.1.json'}


chart





由于视图配置未设置，图表比默认渲染小。
如果你想只为一个图表使用某个主题，可以使用 with 语句来启用一个临时主题
with alt.theme.enable('default'):
    spec = chart.to_json()



注意
上述操作要求在 with 代码块期间发生转换/保存操作，例如 to_dict()、to_json()、save()。请参阅 vega/altair#3586




内置主题#
目前 Altair 提供的内置主题不多，但我们计划将来添加更多选项。
你可以通过下面的 Vega-Altair 主题测试 来感受从 Vega Themes 继承的主题
显示 Vega-Altair 主题测试

选择主题

加载中...




定义自定义主题#
主题就是一个简单的函数，它返回一个字典，包含要在渲染时添加到图表规范中的默认值。
使用 altair.theme.register()，我们可以在函数定义处注册并启用主题。

例如，这里我们定义一个主题，其中所有标记都以黑色填充绘制，除非另有指定
import altair as alt
from vega_datasets import data

# define, register and enable theme

@alt.theme.register("black_marks", enable=True)
def black_marks() -> alt.theme.ThemeConfig:
    return {
        "config": {
            "view": {"continuousWidth": 300, "continuousHeight": 300},
            "mark": {"color": "black", "fill": "black"},
        }
    }


# draw the chart
cars = data.cars.url
alt.Chart(cars).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q'
)





如果要恢复默认主题，请使用
alt.themes.enable('default')


在尝试你的主题时，可以使用下面的代码查看它在各种图表/标记上的效果
显示 Vega-Altair 主题测试代码
import altair as alt

VEGA_DATASETS = "https://cdn.jsdelivr.net.cn/npm/vega-datasets@v1.29.0/data/"
us_10m = f"{VEGA_DATASETS}us-10m.json"
unemployment = f"{VEGA_DATASETS}unemployment.tsv"
movies = f"{VEGA_DATASETS}movies.json"
barley = f"{VEGA_DATASETS}barley.json"
iowa_electricity = f"{VEGA_DATASETS}iowa-electricity.csv"
common_data = alt.InlineData(
    [
        {"Index": 1, "Value": 28, "Position": 1, "Category": "A"},
        {"Index": 2, "Value": 55, "Position": 2, "Category": "A"},
        {"Index": 3, "Value": 43, "Position": 3, "Category": "A"},
        {"Index": 4, "Value": 91, "Position": 4, "Category": "A"},
        {"Index": 5, "Value": 81, "Position": 5, "Category": "A"},
        {"Index": 6, "Value": 53, "Position": 6, "Category": "A"},
        {"Index": 7, "Value": 19, "Position": 1, "Category": "B"},
        {"Index": 8, "Value": 87, "Position": 2, "Category": "B"},
        {"Index": 9, "Value": 52, "Position": 3, "Category": "B"},
        {"Index": 10, "Value": 48, "Position": 4, "Category": "B"},
        {"Index": 11, "Value": 24, "Position": 5, "Category": "B"},
        {"Index": 12, "Value": 49, "Position": 6, "Category": "B"},
        {"Index": 13, "Value": 87, "Position": 1, "Category": "C"},
        {"Index": 14, "Value": 66, "Position": 2, "Category": "C"},
        {"Index": 15, "Value": 17, "Position": 3, "Category": "C"},
        {"Index": 16, "Value": 27, "Position": 4, "Category": "C"},
        {"Index": 17, "Value": 68, "Position": 5, "Category": "C"},
        {"Index": 18, "Value": 16, "Position": 6, "Category": "C"},
    ]
)
HEIGHT_SMALL = 140
STANDARD = 180
WIDTH_GEO = int(STANDARD * 1.667)
bar = (
    alt.Chart(common_data, height=HEIGHT_SMALL, width=STANDARD, title="Bar")
    .mark_bar()
    .encode(x=alt.X("Index:O").axis(offset=1), y=alt.Y("Value:Q"), tooltip="Value:Q")
    .transform_filter(alt.datum["Index"] <= 9)
)
line = (
    alt.Chart(common_data, height=HEIGHT_SMALL, width=STANDARD, title="Line")
    .mark_line()
    .encode(
        x=alt.X("Position:O").axis(grid=False),
        y=alt.Y("Value:Q").axis(grid=False),
        color=alt.Color("Category:N").legend(None),
        tooltip=["Index:O", "Value:Q", "Position:O", "Category:N"],
    )
)
point_shape = (
    alt.Chart(common_data, height=HEIGHT_SMALL, width=STANDARD, title="Point (Shape)")
    .mark_point()
    .encode(
        x=alt.X("Position:O").axis(grid=False),
        y=alt.Y("Value:Q").axis(grid=False),
        shape=alt.Shape("Category:N").legend(None),
        color=alt.Color("Category:N").legend(None),
        tooltip=["Index:O", "Value:Q", "Position:O", "Category:N"],
    )
)
point = (
    alt.Chart(movies, height=STANDARD, width=STANDARD, title="Point")
    .mark_point(tooltip=True)
    .transform_filter(alt.datum["IMDB_Rating"] != None)
    .transform_filter(
        alt.FieldRangePredicate("Release_Date", [None, 2019], timeUnit="year")
    )
    .transform_joinaggregate(Average_Rating="mean(IMDB_Rating)")
    .transform_calculate(
        Rating_Delta=alt.datum["IMDB_Rating"] - alt.datum.Average_Rating
    )
    .encode(
        x=alt.X("Release_Date:T").title("Release Date"),
        y=alt.Y("Rating_Delta:Q").title("Rating Delta"),
        color=alt.Color("Rating_Delta:Q").title("Rating Delta").scale(domainMid=0),
    )
)
bar_stack = (
    alt.Chart(barley, height=STANDARD, width=STANDARD, title="Bar (Stacked)")
    .mark_bar(tooltip=True)
    .encode(
        x="sum(yield):Q",
        y=alt.Y("variety:N"),
        color=alt.Color("site:N").legend(orient="bottom", columns=2),
    )
)
area = (
    alt.Chart(iowa_electricity, height=STANDARD, width=STANDARD, title="Area")
    .mark_area(tooltip=True)
    .encode(
        x=alt.X("year:T").title("Year"),
        y=alt.Y("net_generation:Q")
        .title("Share of net generation")
        .stack("normalize")
        .axis(format=".0%"),
        color=alt.Color("source:N")
        .title("Electricity source")
        .legend(orient="bottom", columns=2),
    )
)
geoshape = (
    alt.Chart(
        alt.topo_feature(us_10m, "counties"),
        height=STANDARD,
        width=WIDTH_GEO,
        title=alt.Title("Geoshape", subtitle="Unemployment rate per county"),
    )
    .mark_geoshape(tooltip=True)
    .encode(color="rate:Q")
    .transform_lookup("id", alt.LookupData(alt.UrlData(unemployment), "id", ["rate"]))
    .project(type="albersUsa")
)
compound_chart = (
    (bar | line | point_shape) & (point | bar_stack) & (area | geoshape)
).properties(
    title=alt.Title(
        "Vega-Altair Theme Test",
        fontSize=20,
        subtitle="Adapted from https://vega.github.io/vega-themes/",
    )
)

compound_chart


有关主题的更多想法，请参阅 Vega Themes 仓库。



本地化#
数字、日期和货币的首选格式因语言和区域而异。Vega-Altair 利用 D3 的本地化支持，通过全局 alt.renderers.set_embed_options 函数可以轻松为图表配置区域设置。
这里 format_locale 和 time_format_locale 可以是 D3 格式字典，也可以是预定义区域设置名称的字符串。例如，这里我们使用意大利区域设置（命名为 it-IT）来处理货币和日期
import altair as alt
from vega_datasets import data

alt.renderers.set_embed_options(format_locale="it-IT", time_format_locale="it-IT")

source = data.stocks.url
chart = alt.Chart(source).mark_area().transform_filter('year(datum.date) == 2009').encode(
    x='date:T',
    y=alt.Y('price:Q', axis=alt.Axis(format="$.0f")),
    color='symbol:N'
)
chart



有关可用格式区域设置名称的列表，请参阅 https://unpkg.com/d3-format/locale/；有关可用时间格式区域设置的列表，请参阅 https://unpkg.com/d3-time-format/locale/。
配置的本地化设置在保存时会保留。

注意
全局定义的属性 format_locale 和 time_format_locale 应用于整个会话，并且不特定于单个图表。要将本地化设置恢复为默认的美国英语区域设置，请使用以下命令
alt.renderers.set_embed_options(format_locale="en-US", time_format_locale="en-US")


            
            
              
                
                


  

     本页内容
  
    
全局配置 vs. 局部配置 vs. 编码
全局配置
局部配置
编码
选择哪种方法？


调整标题
调整轴限制
调整轴标签
调整图例
移除图表边框
定制颜色
配色方案
颜色域与范围
原始颜色值


调整条形标记的宽度
调整图表大小
图表主题
更改主题
内置主题
定义自定义主题


本地化