python - 如何使 Altair 绘图具有响应性

Question

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

Answer 1

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

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

vega-light 生成的示例 HTML:

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

这里是 CSS 片段，它基本上覆盖了 Canvas 的宽度/高度(样式):

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

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

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

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

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

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

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