在 Voila 中以单线渲染绘制图表

Question

我一直在笔记本中摆弄一些图表，并使用 Voila 来正确地可视化它们，以便在 HTML 渲染中进行演示。通常，一切都很顺利（经过大量修改）。但现在我遇到了一个奇怪的但是：

显示绘图图表时，它会呈现 在单行中，瞧。我创建了一个我认为是最小的示例。

这是代码：

import pandas as pd
import ipywidgets as widgets
pd.options.plotting.backend = "plotly"
def draw(b):
    df = pd.DataFrame({'team': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                   'points': [18, 22, 19, 14, 14, 11, 20, 28]})
    with output:
        fig2 = df.plot(kind='line', x='team', y='points')
        fig2.show()
button = widgets.Button(description="Draw")
display(button)
output = widgets.Output()
print("Line above output")
display(output)
print("Line below output")
button.on_click(draw)

这是它在笔记本中的样子（应该是这样的）：

这是它在浏览器中的样子：

不知道这里发生了什么。甚至连继续下去的线索都没有。

Answer 1

我认为这只是一个 html 渲染问题，您可以通过设置以下选项来解决：

import plotly.io as pio

# the rest of your code

with output:
        fig2 = df.plot(kind='line', x='team', y='points')
        html_chart = pio.to_html(fig2) 
        display(widgets.HTML(html_chart))