在Streamlit中使用Altair绘图：如何添加图例？

要给Altair绘制的多线条图表添加图例，核心是让线条的类别成为数据的一个维度，并映射到color编码——这是Altair生成图例的标准方式，无需额外复杂设置。以下是两种常见场景的解决方案：

场景1：所有线条使用相同插值方式 #

把多条线的数据合并成**长格式（long-form）**数据，新增一个标记线条类别的列，再通过color映射该列自动生成图例：

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

# 生成基础数据
x = np.linspace(0, 10, 100)
y_sin = np.sin(x)
y_cos = np.cos(x)

# 整理成长格式数据：将多条线的y值合并，新增"线条名称"列区分
df = pd.DataFrame({
    'x': np.tile(x, 2),  # 重复x轴数据两次
    'y': np.concatenate([y_sin, y_cos]),
    '线条名称': ['正弦曲线'] * 100 + ['余弦曲线'] * 100
})

# 绘制图表，color映射到"线条名称"列自动生成图例
chart = alt.Chart(df).mark_line(interpolate='linear').encode(
    x='x',
    y='y',
    # 设置color编码，指定标题和数据类型（N表示标称型）
    color=alt.Color('线条名称:N', title='线条类型')
)

st.altair_chart(chart, use_container_width=True)

场景2：不同线条使用不同插值方式 #

如果每条线需要单独设置插值参数（比如一条用linear，一条用basis），可以保留多图层结构，通过虚拟类别列+共享颜色比例尺来生成图例：

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

x = np.linspace(0, 10, 100)
y_sin = np.sin(x)
y_cos = np.cos(x)

df_sin = pd.DataFrame({'x': x, 'y': y_sin})
df_cos = pd.DataFrame({'x': x, 'y': y_cos})

# 定义共享的颜色比例尺：指定每个线条的名称和对应颜色
color_scale = alt.Scale(
    domain=['正弦曲线', '余弦曲线'],
    range=['#2c7fb8', '#d95f02']
)

# 第一个图层：设置插值+虚拟类别列，显示图例
chart_sin = alt.Chart(df_sin).mark_line(interpolate='linear').encode(
    x='x',
    y='y',
    color=alt.Color(
        '线条名称:N',
        scale=color_scale,
        legend=alt.Legend(title='线条类型')
    )
).transform_calculate(线条名称='"正弦曲线"')  # 生成虚拟类别列

# 第二个图层：设置不同插值+虚拟类别列，隐藏重复图例
chart_cos = alt.Chart(df_cos).mark_line(interpolate='basis').encode(
    x='x',
    y='y',
    color=alt.Color(
        '线条名称:N',
        scale=color_scale,
        legend=None  # 不重复显示图例
    )
).transform_calculate(线条名称='"余弦曲线"')

# 合并两个图层
chart = chart_sin + chart_cos

st.altair_chart(chart, use_container_width=True)

关键说明 #

• Altair的图例依赖**编码（encoding）**而非单独的样式设置，因此必须将线条的类别映射到color（或其他视觉属性）才能生成图例。
• 长格式数据是Altair推荐的输入格式，比单独绘制多图层更易维护和扩展。

内容的提问来源于stack exchange，提问作者amw