在Jupyterlab中居中输出Altair (包括将其导出为HTML时)

Question

如何在Jupyterlab中居中对齐Altair图表，使其在导出的HTML中保持居中？

以下代码使notebook中的绘图居中；但是，当我将notebook导出为HTML时，输出为空/空白。

import altair as alt
import pandas as pd
from IPython.core.display import display, HTML

df=pd.DataFrame({'a': [1,2,3], 'b': [2,3,4]})

c=alt.Chart(df).mark_bar().encode(
    x='a',
    y='b'
)

s=f"""
<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
  <div>{c.to_html()}</div>
</div>
"""

display(HTML(s))

任何帮助都将不胜感激！

Answer 1

很难确切地知道如何回答你的问题，因为在显示和导出笔记本时(甚至在jupyter notebook和jupyterlab之间)有太多的变量。

我怀疑图表在导出时没有显示的原因可能是因为您使用的是一个简单的HTML输出，该输出不适用于Jupyter中默认的notebook导出。

这是一个小技巧，但您可以访问默认的notebook HTML输出，它可以使用或不使用requirejs，如下所示：

with alt.renderers.enable('default'):
  html = c._repr_mimebundle_()['text/html']

相反，使用该HTML应该可以在活动笔记本和HTML导出中工作：

import altair as alt
import pandas as pd
from IPython.core.display import display, HTML

df=pd.DataFrame({'a': [1,2,3], 'b': [2,3,4]})

c=alt.Chart(df).mark_bar().encode(
    x='a',
    y='b'
)
with alt.renderers.enable('default'):
  html = c._repr_mimebundle_()['text/html']

s=f"""
<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
  {html}
</div>
"""

display(HTML(s))