python - 使用 Altair/vega-lite/vega-embed 控制 Canvas 大小

标签 python vega altair vega-lite

我正在使用 vega-lite 构建图表,并使用 vega-embed 在 DOM 中渲染它们。我喜欢这些工具和抽象概念,但我仍在弄清楚其中一些工具是如何工作的。

我正在开发一个应用程序,其中控制 Canvas 的精确大小非常重要。不幸的是,当我指定(例如)

bars = alt.Chart(df).mark_bar().encode(
  x='bins:O',
  y="weights:Q"
).properties(width=240, height=200)

我得到一个如下所示的图表对象:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "data": {
    "name": "data-a681d02fb484e64eadd9721b37015d5b"
  },
  "datasets": {
    "data-a681d02fb484e64eadd9721b37015d5b": [
      {
        "bins": 3.7,
        "weights": 5.555555555555555
      },
      {
        "bins": 10.8,
        "weights": 3.439153439153439
      },
      {
        "bins": 17.9,
        "weights": 17.857142857142858
      },
      {
        "bins": 25.0,
        "weights": 24.206349206349206
      },
      {
        "bins": 32.0,
        "weights": 16.137566137566136
      },
      {
        "bins": 39.1,
        "weights": 12.3015873015873
      },
      {
        "bins": 46.2,
        "weights": 9.788359788359788
      },
      {
        "bins": 53.3,
        "weights": 5.423280423280423
      },
      {
        "bins": 60.4,
        "weights": 3.439153439153439
      },
      {
        "bins": 67.5,
        "weights": 1.8518518518518516
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "bins",
      "type": "ordinal"
    },
    "y": {
      "field": "weights",
      "type": "quantitative"
    }
  },
  "height": 200,
  "mark": "bar",
  "width": 240
}

(注意 config.view 中不同的高度和宽度。)

我像这样渲染为 HTML:

<div id="my_id"></div>
<script>
const vlSpec = my_chart_obj;
vegaEmbed('#my_id', vlSpec, {
    actions: false
}).then(result=>console.log(result)).catch(console.warn);
</script>

这会产生:

<div id="my-id" class="vega-embed">
  <canvas width="284" height="252" class="marks"></canvas>
  <div class="vega-bindings"></div>
</div>

注意:宽度=“284”高度=“252”

看起来宽度和高度正在被填充,但我不知道为什么或如何填充。

图表本身看起来很可爱,只是它的大小错误并且因此弄乱了我的布局。

enter image description here

救命!

最佳答案

config.view 中的宽度和高度由 Altair 的默认主题设置,对您上面创建的图表没有影响,因为它们被图表级别 widthheight 属性。

如果您觉得从图表中删除此配置更好,您可以运行

alt.themes.enable('none')

清除默认图表主题(alt.themes.enable('default') 将恢复默认值)。

<小时/>

关于 Canvas 的大小:图表 widthheight 属性默认控制图表面板本身的大小,不包括轴标签和标题的额外填充。如果您希望整个 Canvas 适合指定的边界,包括标签填充,您可以通过 autosize 指定它属性(property);例如:

alt.Chart(df).mark_bar().encode(
  x='bins:O',
  y="weights:Q"
).properties(
    width=240,
    height=200,
    autosize=alt.AutoSizeParams(
        type='fit',
        contains='padding'
    )
)

enter image description here

但请注意,这并不适用于所有图表类型;请参阅Autosize Limitations了解更多信息。

关于python - 使用 Altair/vega-lite/vega-embed 控制 Canvas 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56844072/

相关文章:

altair - 在 Altair-viz 中对串联图像进行分面

python - 具有不同 x 和 y 编码的 Altair 选择

python - Matplotlib 散点图与图例

python - 如何在不编辑原始模块的情况下从第三方 Python 模块向类添加方法

vega-lite - 如何隐藏 Vega 中的操作按钮

elasticsearch - 在Vega/Vega-lite中绘制漏斗图

python - 使用 Vincent/Vega 添加图表标题

python - 删除python日志记录中的日志级别打印

python - 在 virtualenv 中使用 PL/Pythonu

python - Altair:创建一个具有类似于 mark_errorband 的最大最小带的 mark_line 图表