Question

我试图在使用Ipywidgets的GridspecLayout创建的网格的单个单元格中放置两个图形。但是，这些图显示在交互式控件的左侧，而不是预期的下方。

这张图片here显示了合作实验室中的问题，而这张图片here显示了我期望它的外观（来自Jupyter Notebook和Anaconda）

下面的代码根据所使用的前端复制两张图片。

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import ipywidgets as widgets
from ipywidgets import GridspecLayout,HTML,Layout,interactive_output 

grid = GridspecLayout(5,8)
testTable = pd.DataFrame({'a':np.random.randn(10),
                          'b':np.random.randn(10),
                          'c':np.random.randn(10),
                          'd':np.random.randn(10),
                          'e':np.random.randn(10)})
def plotData(x):
  plt.figure()
  if len(x) > 1:
    plt.plot(testTable.loc[list(x)])
  else:
    plt.plot(testTable.loc[x])
  plt.show()

# header
grid[0,:] = widgets.HTML(value = f"<center><font size = 6><b><font color='red'>{'Historical Overview'}</b></center>")
# Sub-headlines
grid[1,2] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Historical Development Graph'}</u></center>")
grid[1,4] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Upper Pie Chart'}</u></center>")
grid[1,6] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Lower Pie Chart'}</u></center>")
# Interactive controls and descriptions
grid[2,1] = widgets.HTML(value = f"<center><font color='red'>{'Categories:'}")
grid[2,2] = widgets.SelectMultiple(options=testTable.index,
                                   disabled=False,
                                   value = [0])
grid[2,3] = widgets.HTML(value = f"<center><font color='red'>{'Time periods:'}")
grid[2,4] = widgets.SelectMultiple(options=testTable.index,
                           value = [0],
                           disabled = False)
grid[2,5] = widgets.HTML(value = f"<center><font color='red'>{'Time periods:'}")
grid[2,6] = widgets.Select(options=testTable.columns,
                           value = 'a',
                           disabled = False)
# Graphs
grid[3,1:4] = widgets.interactive_output(plotData, {'x':grid[2,2]});
grid[3,4:8] = interactive_output(plotData, {'x':grid[2,4]});

display(grid)

我正在通过Anaconda开发Colaboratory和Jupyter Notebook，两者都通过Windows 10上的Chrome浏览器进行。这也已经通过Mac上的Firefox在JupyterLab上进行了测试，这就是为什么我怀疑这是Colaboratory的问题。

预先，谢谢。

合作实验室上的GridspecLayout（Ipywidgets）问题

0 个答案: