Jupyter Notebook 上的选项卡小部件大小问题

Question

我对添加到选项卡小部件的第二个图表的大小有疑问，它不是所有容器的大小：这是代码

''' output_co2 = widgets.Output()
output_co = widgets. Output()

tab = widgets.Tab(children=[output_co2, output_co],
                  layout=widgets.Layout(width='100%', height='100%'))
tab.set_title(0, 'CO2')
tab.set_title(1, 'CO')
display(tab)

with output_co2:
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=vehicleData['distance_m']/1000,
                             y=vehicleData['co_gs'],
                             name='CO [g/s]',
                             mode="lines",
                             line=dict(
                                       width=2),
    fig.show()
with output_co:
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=vehicleData['distance_m']/1000,
                             y=vehicleData['co_gs'],
                             name='CO [g/s]',
                             mode="lines",
                             line=dict(
                                       width=2),
     fig.show() '''

enter image description here enter image description here

Answer 1

对于 plotly，您需要使用 go.FigureWidget() 代替 go.Figure()，请参阅 here。所以像这样：

output_co2 = widgets.Output()
output_co = widgets.Output()

tab = widgets.Tab(children=[output_co2, output_co])
tab.set_title(0, 'CO2')
tab.set_title(1, 'CO')
display(tab)

with output_co2:
    fig = go.FigureWidget() # HERE
    fig.add_trace(go.Scatter(x=vehicleData['distance_m']/1000,
                             y=vehicleData['co_gs'],
                             name='CO [g/s]',
                             mode="lines",
                             line_width=2))
    fig.show()

with output_co:
    fig = go.FigureWidget() # AND HERE
    fig.add_trace(go.Scatter(x=vehicleData['distance_m']/1000,
                             y=vehicleData['co_gs'],
                             name='CO [g/s]',
                             mode="lines",
                             line_width=2))
    fig.show()

替代方案：使用 plotly，您可以直接使用 go.FigureWidget() 而不是 widgets.Output()

fig1 = go.FigureWidget()
fig2 = go.FigureWidget()

tab = widgets.Tab(children=[fig1, fig2])
tab.set_title(0, 'CO2')
tab.set_title(1, 'CO')

fig1.add_trace(go.Scatter(x=vehicleData['distance_m']/1000,
                             y=vehicleData['co_gs'],
                             mode="lines",
                             line_width=2))

fig2.add_trace(go.Scatter(x=vehicleData['distance_m']/1000,
                             y=vehicleData['co_gs'],
                             mode="lines",
                             line_width=2))
display(tab)

Jupyter Notebook 上的选项卡小部件大小问题

Tab widget size issue on Jupyter Notebook

tabs

widget

tabwidget

jupyter

jupyter-notebook