IPython Notebook：如何组合HTML输出和matplotlib数字？

Question

以下代码在IPython命令的结果单元格中输出呈现的HTML：

from IPython.core.display import HTML

def putHTML():
    source = """
    <h1>Yah, rendered HTML</h1>
    <h2>Here is an image</h2>
    <img src="http://lbkbd.in/wp-content/uploads/2014/10/HTML-Logo.png"/>
    """
    return HTML(source)

如何使用此方法在HTML布局中包含matplotlib生成的图形？

Answer 1

由于IPython已经有一个为图像生成HTML输出的后端，因此您可以使用它们的内联后端：

from matplotlib._pylab_helpers import Gcf
from IPython.core.pylabtools import print_figure 
from base64 import b64encode

# Plot something
plot([1,2],[3,4])

# Get a handle for the plot that was just generated
fig = Gcf.get_all_fig_managers()[-1].canvas.figure

# Generate a data URL for the image
# Matplotlib's display() would output the plot, so I do this manually.
# There might be a wrapper for this somewhere in IPython, if you're
# unhappy with this line..
image_data = "data:image/png;base64,%s" % b64encode(print_figure(fig)).decode("utf-8")

# Remove the plot from the list of plots for the current cell
Gcf.destroy_fig(fig)

# Now you can use the data URL in your HTML output
HTML("Foo Bar <br> <img src='%s'> <br> Baz" % image_data)

Answer 2

另一个选择是遵循此博客上的建议：http://protips.maxmasnick.com/hide-code-when-sharing-ipython-notebooks

具体做法是：

1. 将此代码复制到您的IPython笔记本的顶部（第一个单元格）（直接从上面的链接复制代码和注释，所有功劳都归功于博主）：

import io import urllib.request response = urllib.request.urlopen("http://google.com") text = io.TextIOWrapper(response)

当笔记本导出为HTML时，此行将默认隐藏代码：

import IPython.core.display as di

此行将添加一个按钮以切换代码块的可见性，以便与HTML导出版本一起使用：

di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

1. 运行顶部单元格（包含上面的代码）。您应该看到＆＃34;切换代码＆＃34;完成执行后，按钮正下方出现。

2. 单击按钮可以关闭/打开代码。同样的切换行为将出现在.ipynb和转换后的.html中。

Answer 3

如果您只想将html输出和绘图结合起来，那么开头某处的神奇命令%matplotlib inline就足够了。

当您将笔记本下载为html时，所有绘图都将被正确编码并包含在您的单个html文件中。