html - 在 HTML 表格中，如何使用 python 在 jupyter notebook 中的绘图旁边添加文本？

Question

关于如何创建 1 X 2 HTML 表格的任何想法，其中单元格 {0} 是 matplotlib 图，单元格 {1} 是 Python 3.X 的文本描述？

import matplotlib.pyplot as plt
from io import BytesIO
%matplotlib inline

def add_split_screen(fig, text, iwidth=None):

    figdata = BytesIO()
    fig.savefig(figdata, format='png') 
    figdata.seek(0)
    figdata
    figdata.close()
    iwidth = ' width={0} '.format(iwidth) if iwidth is not None else ''
    datatable = '<table><tr><td>{0}</td><td>{1}</td></tr></table>'.format(figdata, text)
    display(HTML(datatable)) 

设置测试用例：

fig, ax = plt.subplots(1,1, figsize=(6,4))
ax.plot([1,2,3])
text = '<h4>Special Chart:</h4><BR>Description of chart will go here.'

然后在 Jupyter 笔记本中运行该函数：

add_split_screen(fig, text, iwidth='500px')

我的输出如下：

但是，我有兴趣实际看到内嵌 Jupyter 笔记本的情节。

Answer 1

您似乎已经阅读了该文档并且使用BytesIO. 另外两个步骤就是：

1. 为您的绘图使用适当的标签
2. figdata使用 Base64编码。然后将它们解码为str

这是从您的代码修改的完整且可验证的（在 Jupyter 笔记本中）示例：

from base64 import b64encode
from io import BytesIO

from IPython.display import display, HTML
import matplotlib.pyplot as plt

def add_split_screen(fig, text, iwidth=None):
    figdata = BytesIO()
    fig.savefig(figdata, format='png')
    iwidth = ' width={0} '.format(iwidth) if iwidth is not None else ''
    datatable = '<table><tr><td><img src="data:image/png;base64,{0}"/></td><td>{1}</td></tr></table>'.format(b64encode(figdata.getvalue()).decode(), text)
    display(HTML(datatable)) 

fig, ax = plt.subplots(1,1, figsize=(6,4))
ax.plot([1,2,3])
text = '<h4>Special Chart:</h4><BR>Description of chart will go here.'
add_split_screen(fig, text, iwidth='500px')