如何使Altair绘图具有响应性

Question

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

Answer 1

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

Answer 2

虽然由vega-lite确实确定了图表本身的大小，但可以将图表（渲染为画布）像图像一样对待。

我使用了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.marks {
    max-width: 100%!important;
    height: auto!important;
}

这里没有任何缩放比例和原始大小的测试：

这里有一个缩放比例适合周围盒子的测试。

如果使用交互式图表，则缩放可能是个问题。我猜想单击位置没有正确转换（因为画布已缩放，但vega的逻辑不知道），因此结果是奇怪的行为。就我而言，所选内容始终与鼠标光标偏移。

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

也许更好的选择是切换到另一个vega-light规格，该规格将图表显示为特定的显示尺寸，或者切换到其他表示形式（例如，标准列表），然后可以在较小的显示形式上轻松读取显示（自适应设计）。

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

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'
)

这将使其具有响应性，请注意，如果您有多个图，则这是每个图的大小，它无法正常工作，但是每个图将具有父容器的大小。