ipython笔记本水平排列图

Question

目前,在ipython笔记本中创建两个连续图时,它们会一个在另一个下面显示:

我想知道是否有任何方法让它们按行显示,直到窗口中的空间用完为止.因此对于前两个图,输出将如下所示:

我意识到我可以通过在网格中排列子图来做类似的事情,但是我想知道是否可以自动执行它以便在空间用完时将图包裹到下一个"线"上？

Answer 1

是的，你可以这样做：

In [3]: import numpy as np
   ...: xs = np.linspace(0,100,100)
   ...: fig, axs = plt.subplots(nrows=1, ncols=2)
   ...: axs[0].plot(xs, xs * xs)
   ...: axs[1].plot(xs, np.sqrt(xs))
   ...: 

输出：

Answer 2

这对我适用于Python 3.5，Jupyter 4.4.0。

调整浏览器窗口大小以填充水平空间时，图会“四处流淌”。

地块的大小也可以不同（尝试替换figsize=(3+i/3,2+i/4)-请参见下面的第二张图片）

（刚刚意识到这个问题有多老了；我定期寻找同样的东西。我承认代码是从其他Web示例中拼凑而成的，但是现在我已经失去了引用）

import matplotlib.pyplot as plt
import numpy as np
from IPython.display import HTML
import io
import base64


class FlowLayout(object):
    ''' A class / object to display plots in a horizontal / flow layout below a cell '''
    def __init__(self):
        # string buffer for the HTML: initially some CSS; images to be appended
        self.sHtml =  """
        <style>
        .floating-box {
        display: inline-block;
        margin: 10px;
        border: 3px solid #888888;  
        }
        </style>
        """

    def add_plot(self, oAxes):
        ''' Saves a PNG representation of a Matplotlib Axes object '''
        Bio=io.BytesIO() # bytes buffer for the plot
        fig = oAxes.get_figure()
        fig.canvas.print_png(Bio) # make a png of the plot in the buffer

        # encode the bytes as string using base 64 
        sB64Img = base64.b64encode(Bio.getvalue()).decode()
        self.sHtml+= (
            '<div class="floating-box">'+ 
            '<img src="data:image/png;base64,{}\n">'.format(sB64Img)+
            '</div>')

    def PassHtmlToCell(self):
        ''' Final step - display the accumulated HTML '''
        display(HTML(self.sHtml))




oPlot = FlowLayout() # create an empty FlowLayout

# Some fairly regular plotting from Matplotlib
gX = np.linspace(-5,5,100) # just used in the plot example
for i in range(10): # plot 10 charts
    fig, ax = plt.subplots(1, 1, figsize=(3,2)) # same size plots
                           # figsize=(3+i/3,2+i/4)) # different size plots
    ax.plot(gX, np.sin(gX*i)) # make your plot here
    oPlot.add_plot(ax) # pass it to the FlowLayout to save as an image
    plt.close() # this gets rid of the plot so it doesn't appear in the cell


oPlot.PassHtmlToCell()

Answer 3

因为这个问题是很久以前提出的，我将为那些通过搜索引擎找到这个问题的人提出一个更新的解决方案。

由于Jupyter已经很大程度上取代了IPython笔记本，并且Jupyter Lab计划取代Jupyter，因此我的解决方案在Jupyter Lab 0.35.4中实现。

在这种环境下，我发现评估一个单元格内容非常有用：

%%html

<style>
    .jp-OutputArea-child {
        display: inline-block;
    }
</style>

通过允许输出区域（尤其是绘图）并排浮动，可以更好地利用垂直空间。我希望有一个更精致的变体是默认行为。

浏览器目前不支持 CSS 父选择器，但根据选择器级别 4 工作草案，如果浏览器开始支持它，最好使用如下所示的内容：

%%html

<style>
    .jp-OutputArea-child:has(> .jp-RenderedImage) {
        display: inline-block;
    }
</style>