如何使 Altair 绘图具有响应性

Question

能否让 Altair 绘图适合屏幕大小，而不是像素定义的宽度和高度？我读过关于 autosize "fit" 的内容，但我不确定在哪里指定这些内容。

Answer 1

没有办法做到这一点。 Altair/Vega-Lite 图表的尺寸是由图表规格和数据预先确定的，无法根据浏览器的大小进行缩放 window。

Answer 2

虽然 vega-lite 确实决定了图表本身的大小，但可以将图表（呈现为 canvas）视为图像。

我使用了 w3css 中的一个示例，该示例应用于我的 vega-light 图表并相应地缩放图表。基本上它会根据周围的容器按比例缩放。

示例 HTML 由 vega-light 生成：

<div id="visInteractiveYear" class="vega-embed">
<canvas width="1366" height="960" class="marks" style="width: 976px; height: 686px;"></canvas>
</div>

这里是 CSS 片段，它基本上覆盖了 canvas 的 width/height（样式）：

canvas.marks {
    max-width: 100%!important;
    height: auto!important;
}

这里是没有任何缩放的测试及其原始大小：

这里是一个缩放以适应周围框的测试。

如果您使用的是交互式图表，缩放比例可能会出现问题。我猜点击位置没有正确翻译（因为 canvas 被缩放，但 vega 的逻辑不知道它），因此结果是奇怪的行为。在我的例子中，选择总是与鼠标光标有一个偏移量。

此外，用户必须放大才能阅读图表，因为它是按比例缩放的。在大多数情况下可能不是理想的用户友好方式。

也许更好的选择是切换到另一个 vega-light 规范，它为特定的显示尺寸呈现图表，或者切换到不同的表示（例如，标准列表），这样可以很容易地阅读在较小的显示器上（自适应设计）。

对于复杂的图表，在另一个浏览器选项卡中打开图表可能也是一个不错的解决方案。用户知道新标签页，移动浏览器只需显示一个 chart/image，因此无需担心太多混乱。因此，很容易在新选项卡中 navigate/scroll，因为它只包含图表，可能还有一个 back/close 选项卡按钮。

Answer 3

如果您使用的是 Altair 4.0 或更高版本，您可以使用 properties() 和 container:

import altair as alt
from vega_datasets import data

source = data.cars()

plot = alt.Chart(source).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
).properties(
    width='container',
    height='container'
)

这将使它响应，请注意，这是每个图的大小，如果你有多个图，它不会像你预期的那样工作，而是每个图将具有父容器的大小。

如何使 Altair 绘图具有响应性

How to make Altair plots responsive

python

vega-lite

altair