将matplotlib嵌入到iPython HTML中 [英] Imbed matplotlib figure into iPython HTML

问题描述

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

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

 来自IPython.core.display导入HTML 
 
 HTML（< h1> Hello< / h1> ）
  

并获得：

/ 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.指点我的方向。 $ c> from IPython.core.display import HTML
从StringIO导入binascii
导入StringIO
导入matplotlib.pyplot作为plt

＃打开IO对象
sio = StringIO（）

＃生成随机DataFrame
np.random.seed（314）
df = pd.DataFrame（np.random.randn（1000，2） ，列= ['x'，'y']）

＃初始化图形和坐标轴
fig，ax = plt.subplots（1,1）

＃plot DataFrame
ax.scatter（df.iloc [：，0]，df.iloc [：，1]）;

＃将原始画布数据打印到IO对象
fig.canvas.print_png（sio）

＃将原始二进制数据转换为base64
＃我使用这嵌入到一个img标签
img_data = binascii.b2a_base64（sio.getvalue（））

＃保留img标签outter html在自己的变量
img_html ='< img src =data：image / png; base64，{}&＃10;>'。format（img_data）

HTML（< h1> Hello< / h1>< hr />+ img_html）

最后：

I want to dynamically write and display HTML with a code cell in Jupyter Notebook. The objective is to generate the HTML to display table, div, img tags in some way I choose. I want to capture img data and place it where I want in this auto generated HTML.

So far I've figured out that I can do the following:

from IPython.core.display import HTML

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

and get:

Hello

That's great. However, I want to be able to do this:

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

and get something similar to a Hello with a horizontal line and an image below it, where the image is the same one as below.

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)

The result should look like this:

Question

What do I replace 'something' with in order to implement this? And more to the point, how do I get it via python?

I would have imagined there was an attribute on a figure object that would hold an serialized version of the image but I can't find it.

解决方案

After some digging around. Credit to Dmitry B. for pointing me in the right direction.

Solution

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)

I end up with:

这篇关于将matplotlib嵌入到iPython HTML中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！