ipython笔记本小部件中的交互式绘图放置

我有两个绘图，我想与ipython笔记本小部件进行交互。下面的代码是我试图做的一个简化示例

import matplotlib.pyplot as plt
import IPython.html.widgets as wdg

def displayPlot1(rngMax = 10):
    plt.figure(0)
    plt.plot([x for x in range(0, rngMax)])

wdg1 = wdg.interactive(displayPlot1, rngMax = wdg.IntSlider(20))

def displayPlot2(rngMax = 10):
    plt.figure(1)
    plt.plot([x**2 for x in range(0, rngMax)])

wdg2 = wdg.interactive(displayPlot2, rngMax = wdg.IntSlider(10))

wdg.ContainerWidget([wdg.HTML("""<h1>First Plot</h1>"""),
                     wdg1, 
                     wdg.HTML("""<h1>Second Plot</h1>"""), 
                     wdg2])

我想要：

title1
widget1
plot1    
title2
widget2
plot2

而且，似乎当我触摸任何滑块时，整个输出都会被覆盖，并且只显示一个绘图（我正在更改的绘图）

---

如何解决此问题？（如果我将它们分为两个不同的单元，我可能可以做到这一点，但我计划做一些更复杂的事情，最终需要在一个单元中）

IPython笔记本在任何输出之前显示小部件。你可以做的一件事是把你的情节放在。这可以放置在相对于其他小部件的任何位置

但是，如果这样做，则需要明确地将绘图放置在HTML小部件中。这可能有点棘手，但快速解决方案是将绘图的字节字符串保存到缓冲区，然后将字节字符串放入图像标记中

下面是一个例子（）：

导入base64
输入io
将matplotlib.pyplot作为plt导入
将IPyWidget作为小部件导入
从IPython.display导入显示
def手柄_输入1（坡度）：
plt.图（）
plt.绘图（[x*范围内x的斜率（0,11）]）
plt.ylim（（0,10））
output1HTML.value=plot_to_html（）
plt.close（）
def句柄_输入2（曲率）：
plt.图（）
plt.绘图（[x*x*范围内x的曲率（0,11）]）
plt.ylim（（0100））
output2HTML.value=plot_to_html（）
plt.close（）
def plot_to_html（）：
#将图像数据写入字符串缓冲区并获取PNG图像字节
buf=io.BytesIO（）
plt.savefig（buf，format='png'）
buf.seek（0）
返回“”格式（base64.b64encode（buf.getvalue（））.decode（'ascii'））
plt.ioff（）
heading1HTML=widgets.HTML（“坡度”）
input1Float=widgets.FloatSlider（值=0.5，最小值=0.0，最大值=1.0，步长=0.01，description=“斜率：）
widgets.interactive（handle\u input1，slope=input1Float）
output1HTML=widgets.HTML（）
heading2HTML=widgets.HTML（“曲率”）
input2Float=widgets.FloatSlider（值=0.5，最小值=0.0，最大值=1.0，步长=0.01，description=“curvature:）
widgets.interactive（handle\u input2，curvature=input2Float）
output2HTML=widgets.HTML（）
显示（widgets.Box（[heading1HTML，input1Float，output1HTML，heading2HTML，input2Float，output2HTML]））
句柄\u input1（input1Float.value）
句柄\u input2（input2Float.value）

---

编辑1：IPython小部件已移动到

IPython.html

；相应地更新了代码

编辑2：根据最新版本使用widgets.interactive；再次更新IPython小部件位置；添加ASCII编码

---

编辑3：从2021年起，IPython小部件可能不再是交互式绘图的首选工具。现在，使用可能是制作交互式图表的更好方法。

看到你开始悬赏，所以我想你可能仍然对更详细的答案感兴趣。我在下面添加了一些代码，这些代码应该说明如何做到这一点。我有点晚了，但也许你仍然可以为此赢得一些声誉。IPython widgets再次被移动，但现在它只是一个警告。更重要的是，在Python3.x中，您必须

.decode（'ascii'）

从

buf.getvalue（）

返回的字节字符串来纠正我自己，它是ascii是由

base64.b64encode（）

返回的值，因此我建议的修改是

base64.b64encode（buf.getvalue（））.encode（'ascii'））

这在Python2中也很有效，在Python3中也是需要的。感谢您的反馈，@gboffi。我相应地修改了示例，并查看了最新的IPython widgets文档。interactive（）是向小部件注册观察者的首选方法。我这台机器上没有python3，你能检查一下它是否在没有任何警告的情况下运行吗？oops，注释1:

.decode（）

；注释2:

.encode（）

正确答案当然是

.decode（）

如

base64.b64encode（buf.getvalue（））.decode（'ascii'）

-除了这个问题（这完全是我的错），您的更新代码在IPython/Jupyter 4和Pyhon 3.5上工作得非常出色。非常感谢，在jupyter lab 2.2.6中运行时，上面的ciaoThe不会产生任何结果。我想ipythonwidgets自从发表这些评论以来已经取得了长足的进步。如果能得到一些帮助，这将是非常好的：D

title1
widget1
plot1    
title2
widget2
plot2

import base64
import io
import matplotlib.pyplot as plt
import ipywidgets as widgets
from IPython.display import display

def handle_input1(slope):
    plt.figure()
    plt.plot([x * slope for x in range(0, 11)])
    plt.ylim((0,10))
    output1HTML.value = plot_to_html()
    plt.close()

def handle_input2(curvature):
    plt.figure()
    plt.plot([x * x * curvature for x in range(0, 11)])
    plt.ylim((0,100))
    output2HTML.value = plot_to_html()
    plt.close()

def plot_to_html():
    # write image data to a string buffer and get the PNG image bytes
    buf = io.BytesIO()
    plt.savefig(buf, format='png')
    buf.seek(0)
    return """<img src='data:image/png;base64,{}'/>""".format(base64.b64encode(buf.getvalue()).decode('ascii'))

plt.ioff()

heading1HTML = widgets.HTML("""<h1>Slope</h1>""")
input1Float = widgets.FloatSlider(value=0.5, min=0.0, max=1.0, step=0.01, description="slope: ")
widgets.interactive(handle_input1, slope=input1Float)
output1HTML = widgets.HTML()

heading2HTML = widgets.HTML("""<h1>Curvature</h1>""")
input2Float = widgets.FloatSlider(value=0.5, min=0.0, max=1.0, step=0.01, description="curvature: ")
widgets.interactive(handle_input2, curvature=input2Float)
output2HTML = widgets.HTML()

display(widgets.Box([heading1HTML, input1Float, output1HTML, heading2HTML, input2Float, output2HTML]))

handle_input1(input1Float.value)
handle_input2(input2Float.value)