绘图图未在 ipywidgets 交互函数中渲染（Google Colab）

Question

我正在尝试将 Plotly 与 ipywidgets 结合使用，根据某人想要显示的内容来更新图中的数据。到目前为止我有以下内容，

import plotly
import plotly.express as px
import ipywidgets as widgets
import plotly.io as pio
pio.renderers.default = 'colab'

def plotfun(Complex_Name, Num_Beds):
  ### THIS FUNCTION CONTROLS THE INTERACTIVE PLOTTING ###

  # Get the Input into a format consistent with the data
  definer = {'1 Bedroom':'1 bed', '2 Bedroom':'2 beds', '3 Bedroom':'3 beds'}
  Num_Beds_def = definer.get(Num_Beds)

  # Get the dataframe for the specific complex and number of bedrooms
  Complex_df = existing[existing['Complex Name'] == Complex_Name]
  Complex_df = Complex_df[Complex_df['Number of Bedrooms'] == Num_Beds_def]

  # Change any 'Call for Rent' to 0 so it can be plotted
  Complex_df['Unit Prices'] = Complex_df['Unit Prices'].replace(['Call for Rent'],0)

  # Plot using Plotly
  fig = px.scatter(Complex_df,
          x = 'Date',
          y = 'Unit Prices',
          color = 'Unit Name',
          symbol = 'Unit Name',
          template = 'plotly_dark',  # Dark Mode
          title = '<b>' + Complex_Name + ' ' + Num_Beds + ' ' + 'Units' + '</b>',
          width = 1600,
          height = 700,
          hover_name="Unit Name",
          hover_data=['Square Feet', 'Unit Prices', 'Availibility Date', 'Number of Bathrooms'])

  # Set Range
  fig.update_yaxes(range = [1500,2800])

  #Aesthetics
  fig.update_layout(legend=dict(
      orientation="h",
      entrywidth=50,
      yanchor="bottom",
      y=1.02,
      xanchor="right",
      x=1,
      bgcolor="black",
      bordercolor="steelblue",
      borderwidth=0.5
  ))

  fig.update_layout(
  yaxis = dict(tickfont = dict(size=14),
              titlefont = dict(size = 18)
  ))

  return fig.show()

#Interact Object
interactive = widgets.interactive(plotfun,
                                      Complex_Name = widgets.RadioButtons(options= existing['Complex Name'].unique(),
                                                                          description='Complex Name:',
                                                                          disabled=False
                                                                          ),
                                      Num_Beds = widgets.RadioButtons(options= ['1 Bedroom', '2 Bedroom', '3 Bedroom'],
                                                                      description='Number of Bedrooms:',
                                                                      disabled=False
                                                                      ),
                                      )

#Interact Widgets Organization
controls = widgets.HBox(interactive.children[:-1], layout = widgets.Layout(flex_flow='row wrap'))
output = interactive.children[-1]
display(widgets.VBox([controls, output]))

但是，当我运行代码并尝试交换选项时，我会呈现“空白”输出。这可以在下面看到，

它为绘图“腾出空间”，但实际上并不显示它。我尝试删除，

pio.renderers.default = 'colab'

并使用，

return fig.show(renderer = 'colab')

不幸的是，这产生了同样的问题。我最成功的尝试（基于我找到的另一个答案）是添加这个功能，

def enable_plotly_in_cell():
  import IPython
  from plotly.offline import init_notebook_mode
  display(IPython.core.display.HTML('''<script src="/static/components/requirejs/require.js"></script>'''))
  init_notebook_mode(connected=False)

到单元格顶部并在绘图函数内使用以下行。

enable_plotly_in_cell()

此方法很少会显示输出，并且仅针对某些选项。它也很难在选项之间切换。

plotly 版本为 5.13.1 ipywidgets 版本是 7.7.1

理想情况下，输出看起来像这样，

具有能够切换要呈现的数据的功能。

我对这些库很陌生，也许它们不是最适合使用的库。如果是这样，请随时告诉我您的想法或任何可能的解决方案。

谢谢！

Answer 1

我是 Google Colab 的用户，并且在

interactive_output

上遇到了同样的行为。

我目前找到的解决方案是回到 Plotly 5.10 版本。您可以通过运行来做到这一点：

pip install plotly==5.10

希望对有相同情况的人有帮助👍