如何使 Altair 绘图响应

Posted

技术标签:

【中文标题】如何使 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 很遗憾没有。

以上是关于如何使 Altair 绘图响应的主要内容,如果未能解决你的问题,请参考以下文章

Plotly express 与 Altair/Vega-Lite 的交互式绘图

Altair mark_line 的绘图比 matplotlib 更嘈杂?

Altair 交互式线图,单击右侧图标时使线条弹出并突出显示

如何使matlab中的控件和界面一起大小变化

22个Python绘图包汇总,超实用的那种

如何在 Altair 中使用 GeoJSON 数据制作地图?