将matplotlib图形嵌入到iPython HTML中

piRSquared 发表于 Dev

海盗

我想在Jupyter Notebook中使用代码单元动态编写和显示HTML。目的是生成HTML以我选择的某种方式显示表格，div，img标签。我想捕获img数据并将其放置在此自动生成的HTML中所需的位置。

到目前为止，我已经知道可以执行以下操作：

from IPython.core.display import HTML

HTML("<h1>Hello</h1>")

并获得：

你好

那太棒了。但是，我希望能够做到这一点：

HTML("<h1>Hello</h1><hr/><img src='somestring'/>")

并获得与Hello相似的东西，它有一条水平线，并在其下方有一张图像，该图像与下面的图像相同。

import pandas as pd
import numpy as np

np.random.seed(314)
df = pd.DataFrame(np.random.randn(1000, 2), columns=['x', 'y'])

df.plot.scatter(0, 1)

结果应如下所示：

问题

'something'为了实现此目的，我将替换为什么？更重要的是，如何通过python获取它？

我本来可以想象在图形对象上有一个属性，该属性可以保存图像的序列化版本，但我找不到它。

海盗

经过一些挖掘。感谢Dmitry B.为我指出了正确的方向。

解决方案

from IPython.core.display import HTML
import binascii
from StringIO import StringIO
import matplotlib.pyplot as plt

# open IO object
sio = StringIO()

# generate random DataFrame
np.random.seed(314)
df = pd.DataFrame(np.random.randn(1000, 2), columns=['x', 'y'])

# initialize figure and axis
fig, ax = plt.subplots(1, 1)

# plot DataFrame
ax.scatter(df.iloc[:, 0], df.iloc[:, 1]);

# print raw canvas data to IO object
fig.canvas.print_png(sio)

# convert raw binary data to base64
# I use this to embed in an img tag
img_data = binascii.b2a_base64(sio.getvalue())

# keep img tag outter html in its own variable
img_html = '<img src="data:image/png;base64,{}&#10;">'.format(img_data)

HTML("<h1>Hello</h1><hr/>"+img_html)