ipython笔记本水平布置图 [英] ipython notebook arrange plots horizontally

问题描述

当前，在ipython笔记本中创建两个连续的绘图时，它们显示在另一个下方:

Currently, when creating two consecutive plots in an ipython notebook, they are displayed one below the other:

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

I'm wondering if there's any way to have them displayed in rows until the space runs out in the window. So for the first two plots, the output would look like this:

我意识到我可以通过在网格中排列子图来执行类似的操作，但是我想知道是否有可能自动执行此操作，以便在空间用完时将图将其包裹在下一个行"上?

I realize that I can do something similar by arranging subplots in a grid, but I'm wondering if it's possible to do it automatically so that plots are wrapped onto the next 'line' when the space runs out?

推荐答案

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

This works for me in Python 3.5, Jupyter 4.4.0.

当您调整浏览器窗口的大小以填充水平空间时，图会四处流淌".

The plots "flow around" when you resize the browser window, to fill the horizontal space.

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

The plots can also be different sizes (try substituting figsize=(3+i/3,2+i/4) - see the second image below)

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

(Just realised how old this question is; I look periodically for the same thing. I confess the code is cobbled together from other web examples, but I've lost the references now)

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()

这篇关于ipython笔记本水平布置图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！