分层图表从一张图表中删除标记答案

【问题标题】：Layering charts removes marks from one chart分层图表从一张图表中删除标记
【发布时间】：2021-07-22 21:18:37
【问题描述】：

我有以下数据：

我想要绘制的时间间隔内的各种测量值（每个都有一个名称）（每条线）
一种测量称为“状态”，我想用它来为图表的背景着色（垂直切片）

测量数据框大致如下：

                     Time Trend  Value
0     2021-03-24 16:10:20     A   -1.3
1     2021-03-24 16:10:35     A   -5.3
2     2021-03-24 16:10:50     A   -6.3
3     2021-03-24 16:11:05     A   -2.3
4     2021-03-24 22:39:05     A   -5.3
...                   ...   ...    ...
12443 2021-03-24 16:10:20     H    0.0
12444 2021-03-24 22:38:20     H    1.0
12445 2021-03-24 22:38:35     H    2.0
12446 2021-03-24 22:38:50     H    3.0
12447 2021-03-24 22:39:05     H    4.0

为此，我提取了某个状态为“活动”的时间范围，如下所示：

      State               Start                 End
0      Idle 2021-03-24 16:10:20 2021-03-24 16:10:50
1      Pump 2021-03-24 16:10:50 2021-03-24 16:20:05
...
5      Cool 2021-03-24 20:42:20 2021-03-24 22:01:35
6      Pump 2021-03-24 22:01:35 2021-03-24 22:02:50

然后我创建了两个图表，我想将它们与 alt.layer 结合起来

每个测量（趋势）都有线条
每个州都有一个矩形

 alt_st = (
        alt.Chart(state_df)
        .mark_rect()
        .encode(
            x=alt.X("Start", title="Time"),
            x2=alt.X2("End", title="Time"),
            y=alt.value(15),
            y2=alt.value(0),
            color=alt.Color("State:O", scale=get_state_scale(state_df.State.unique())),
        )
        # .add_selection(selection)
    )

chart = (
    alt.Chart(df)
    .mark_line()
    .encode(
        alt.X("Time"),
        alt.Y("Value"),
        color="Trend",
    )
)

结合alt.layer:

alt.layer(chart, alt_st).resolve_legend("independent")

可以看出，组合图表有一个混乱的图例，第一个图表中的标记（线）消失了。

到目前为止我尝试了什么：

查看 altair 和 Vega-Lite 的 GitHub 存储库中的问题
更改顺序（没有帮助）
改用 vConcat（没有帮助）
从状态图中删除自定义比例（这有帮助，但结果也不是很好）

我在这里尝试创建一个最小示例时发现的最后一件事。

我发现了一个类似的问题 (Altair: Layered Line Chart with Legend and Custom Colors)，但不知道如何将解决方案应用于我的案例。

到目前为止，我的印象是，我正在做的事情对于 Altair/Vega-Lite 来说是非常单一的 - 如果有人能指出我遗漏的相关概念，我会很高兴。

【问题讨论】：

标签： python altair vega-lite

【解决方案1】：

您最后的内容看起来是正确的，但您可能希望使用 resolve_scale(color='independent') 而不是 resolve_legend('independent') 来正确分隔图例：

import altair as alt
from vega_datasets import data

source = data.iowa_electricity()
# Create end year for mark_rect
source['end_year'] = source.groupby('source')['year'].shift(-1)
source = source.dropna()

line = alt.Chart(source).mark_line().encode(
    x="year:T",
    y="net_generation:Q",
    color="source:N")

bar = alt.Chart(source).mark_rect().encode(
    x="year:T",
    x2="end_year",
    color='year(year):O',
    y=alt.value(15),
    y2=alt.value(0)
)

(bar + line).resolve_scale(color='independent')

您可以使用mark_rect(yOffset=270, y2Offset=300) 将条形移至底部（偏移量以像素为单位，而不是图表单位，与您对 y 和 y2 使用 alt.value 时相同）：

【讨论】：