如何使 Altair 绘图响应

Posted 2023-02-16

【中文标题】如何使 Altair 绘图响应

【英文标题】：How to make Altair plots responsive

【发布时间】：2019-08-05 18:01:02

【问题描述】：

可以让 Altair 绘图适合屏幕尺寸，而不是像素定义的宽度和高度吗？我已经阅读了有关 autosize "fit" 的内容，但不确定在哪里指定这些内容。

【参考方案1】：

没有办法做到这一点。 Altair/Vega-Lite 海图的尺寸是由海图规范和数据预先确定的，不能随浏览器窗口的大小缩放。

【参考方案2】：

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

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

vega-light 生成的示例 html：

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

这里是 CSS sn-p，它基本上覆盖了画布的宽度/高度（样式）：

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

这里是一个没有任何缩放的测试和它的原始大小：

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

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

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

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

对于复杂的图表，在另一个浏览器选项卡中打开图表可能也是一个不错的解决方案。用户知道新标签，移动浏览器必须只显示一个图表/图像，所以不用担心太多混乱。因此，在新选项卡中导航/滚动很容易，因为它只包含图表，可能还有一个后退/关闭选项卡按钮。

【参考方案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 4.1.0 的 Jupyter Notebook 中对我不起作用。一旦我指定了 width='container' 和 height='container'，图形就会折叠成一个不可见的点。

@AntonGolubev 我的也是如此。你有办法解决吗？

@UalasRohrer 很遗憾没有。