IPython 笔记本：如何结合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)

如何使用这种方法将 matplotlib 动态生成的图形包含在 HTML 布局中？

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

如果您只是想合并 html 输出和绘图，那么在开头某处的神奇命令 %matplotlib inline 应该就足够了。

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

Answer 3

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

具体来说：

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

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)

这一行将添加一个按钮来切换代码块的可见性，用于 HTML 导出版本：

di.display_html('''<button onclick="jQuery('.input_area').toggle(); jQuery('.prompt').toggle();">Toggle code</button>''', raw=True)

运行顶部单元格（包含上面的代码）。当它完成执行时，你应该看到它正下方的 "Toggle code" 按钮出现。
点击按钮切换代码off/on。 .ipynb 和转换后的 .html 中都会出现相同的切换行为。

IPython 笔记本：如何结合HTML 输出和matplotlib 图形？

IPython Notebook: How to combine HTML output and matplotlib figures?

html

python

matplotlib

ipython

ipython-notebook