Altair：如何在烛台图表上使用区间选择（即：分层图表）

Question

我正在尝试复制以下堆叠图表，可以通过与底部图表交互来选择顶部图表的域，但使用烛台图（这是一个分层图表）：

（下面的示例代码在这里：https://altair-viz.github.io/gallery/interval_selection.html）

我无法让它与分层图表一起使用 (https://altair-viz.github.io/gallery/candlestick_chart.html)。是否可以使用分层图表以这种方式按日期擦洗？谢谢。

这是我尝试过的：

import altair as alt
from vega_datasets import data

source = data.ohlc()
brush = alt.selection(type='interval', encodings=['x'])
open_close_color = alt.condition("datum.open <= datum.close", alt.value("green"), alt.value("firebrick"))

base = alt.Chart(source).encode(
    alt.X('date:T', axis=alt.Axis(format='%m/%d', title='Date in 2009')),
    color=open_close_color
).properties(width=600, height=400)

rule = base.mark_rule().encode(
    alt.Y('low:Q', title='Price', scale=alt.Scale(domain=brush, zero=False)),
    alt.Y2('high:Q')
)

bar = base.mark_bar().encode(
    alt.Y('open:Q', scale=alt.Scale(domain=brush, zero=False)),
    alt.Y2('close:Q')
)

candles = rule + bar

lower = base.properties(
    height=60
).add_selection(brush)

candles & lower

Answer 1

这是 Vega-Lite 规格和交互式图表，通过 Vega 编辑器：https://vega.github.io/editor/#/gist/2e5d94af2d36ee770b980f648774b865/vega-lite-interactive-candlestick-spec.json

这是使用以下 python/altair 代码创建的：

import altair as alt
from vega_datasets import data

source = data.ohlc()
open_close_color = alt.condition("datum.open <= datum.close",
                                 alt.value("#06982d"),
                                 alt.value("#ae1325"))
brush = alt.selection(type='interval', encodings=['x'])

base = alt.Chart(source).encode(
    alt.X('date:T',
          axis=alt.Axis(
              format='%m/%d',
              labelAngle=-45,
              title='Date in 2009'
          )
    ),
    color=open_close_color
).properties(
    width=600,
)

rule = base.mark_rule().encode(
    alt.Y(
        'low:Q',
        title='Price',
        scale=alt.Scale(zero=False),
    ),
    alt.Y2('high:Q')
)

bar = base.mark_bar().encode(
    alt.Y('open:Q'),
    alt.Y2('close:Q')
)

lower = alt.layer(rule, bar, height=60).add_selection(brush)

upper = (rule + bar).encode(
    alt.X('date:T', scale=alt.Scale(domain=brush))
)

# (upper & lower)                         # display the charts
print((upper & lower).to_json(indent=2))  # get the vega-lite spec

我的 Jupyter 设置中的交互性工作存在一些问题，但是当我将规范复制到 Vega 编辑器中时，它可以工作。它可能与 Vega-Lite 的版本有关（我的设置中为 4.8.1，Vega 编辑器中为 4.16.7）。