Vega-Lite图表移除初始过滤器后无法向下自适应增长，如何解决？

你的Web应用中用Altair生成的Vega-Lite图表带有transform_filter功能，移除初始过滤器后，图表内容被截断，既不能自适应向下扩展，也没出现滚动条。当前嵌入代码如下：

<div id="view"></div>
<script type="text/javascript">

    embed_opt = {"mode": "vega-lite", "actions": false}

    var chart = {
       "config": {
         "view": {
           "continuousWidth": 400,
           "continuousHeight": 300
         }
       },
       ... }

    vegaEmbed(
        '#view',
        chart,
        embed_opt
    )                   
</script>

解决方案 #

方案1：让图表自适应内容高度

问题根源在于你给view.continuousHeight设置了固定值300，这会强制图表保持固定高度，无法随数据量变化扩展。修改方式如下：

• 直接修改JS中的图表配置，移除固定高度，让Vega-Lite自动计算高度：

  var chart = {
     "config": {
       "view": {
         "continuousWidth": 400,
         // 去掉固定高度，改为自动计算
         "continuousHeight": undefined
       }
     },
     ... 
  }
  

• 如果是用Altair生成的图表，在Python端配置更方便：

  import altair as alt
  
  # 假设你的图表对象是chart
  chart = chart.configure_view(
      continuousWidth=400,
      continuousHeight=alt.Undefined()
  )
  # 导出为Vega-Lite spec后再嵌入
  

• 同时确保容器#view没有设置固定高度的CSS样式，避免限制图表扩展。

方案2：给容器添加滚动条（限制最大高度）

如果不想让图表无限增高，希望达到一定高度后显示滚动条，可以给容器添加CSS样式：

<style>
#view {
  max-height: 600px; /* 按需设置最大高度 */
  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
}
</style>
<div id="view"></div>

同样需要移除图表配置中的continuousHeight固定值，让图表高度可以超过容器的最大高度，这样滚动条才会生效。

内容的提问来源于stack exchange，提问作者dani herrera