Display 小组件/Output 展示器

支持 IPython 提供的所有 display tools，如Video、Audio、HTML 等，详情见 rich output generated by IPython

也可以用来集成并展示第三方组件，如 Matplotlib、Pandas、Plotly、Panel、Bokeh 等。

TIP

默认使用 display 函数（对小组件的兼容性更好）来渲染组件，但是在多进程场景 display 的会有意想不到的行为。在多进程场景建议使用 multi_thread 参数把 Display 的渲染函数切换为另一个实现（对小组件的兼容性没有display好）。

WARNING

当前页面只能展示组件的样式，需要在 notebook 才有交互效果。

vue

<!-- --plugins vpanel --show-code -->
<template>
  <p>{{ time.value }}</p>
  <PnDisplay :obj='audio' />
  <PnButton name='update' @click='on_click()' />
</template>
<script lang='py'>
from vuepy import ref
import panel as pn

audio = pn.pane.Audio('https://ccrma.stanford.edu/~jos/mp3/pno-cs.mp3', name='Audio')

time = ref(0)

def on_click():
    time.value = audio.time
</script>

展示 Matplotlib

展示 matplotlib 绘制的图，并利用布局组件进行排列。更推荐使用PnMatplotlib组件。

vue

<!-- --plugins vpanel --show-code -->
<template>
  <HBox>
    <PnDisplay :obj="plt1.value"/>
  </HBox>
</template>
<script lang='py'>
import matplotlib.pyplot as plt
import numpy as np

from vuepy import ref


def plt_to_img(title, xlabel, ylabel):
    """
    plt to matplotlib.figure.Figure
    """
    plt.xlabel(xlabel)
    plt.ylabel(ylabel)
    plt.title(title)
    plt.grid(True)
    # plt.show()
    im = plt.gcf()
    plt.close()
    return im


def plt_sin():
    x = np.arange(0, 5 * np.pi, 0.1)
    y = np.sin(x)
    plt.plot(x, y, color='green')
    return plt_to_img('Sine Curve using Matplotlib', 'x', 'sin(x)')

plt1 = ref(plt_sin())
</script>

展示 PIL 图片

vue

<!-- --plugins vpanel --show-code -->
<template>
  <PnDisplay :obj="pil_img"/>
</template>






<script lang="py">
import numpy as np
from PIL import Image

width, height = 300, 200
gradient = np.linspace(0, 255, width, dtype=np.uint8)
gradient_array = np.tile(gradient, (height, 1))

pil_img = Image.fromarray(gradient_array, 'L')
</script>

展示 Pandas Dataframe

vue

<!-- --plugins vpanel --show-code -->
<template>
  <PnDisplay :obj="df1"/>
</template>

<script lang="py">
import pandas as pd

df1 = pd.DataFrame(data={
    'col1': ['a', 'b'],
    'col2': ['c', 'd'],
    'col3': ['e', 'f'],
})
</script>

利用 Display 组件集成基于 ipywidgets/Panel 的任意 widget。

vue

<!-- --plugins vpanel --show-code --backend='panel' -->
<template>
  <PnDisplay :obj="btn"/>
</template>

<script lang="py">
import panel as pn

btn = pn.widgets.Button(name='btn')
</script>

Display API

属性

属性名	说明	类型	默认值
obj	支持 IPython display 的对象	`any`	—

其他属性和Column相同。

src/examples/panel_vuepy/widgets/Display

在 GitHub 上编辑此页

#header-mark#

Display 小组件/Output 展示器

展示 Matplotlib

展示 PIL 图片

展示 Pandas Dataframe

展示 widget

Display API

属性

#header-mark# ​

Display 小组件/Output 展示器 ​

展示 Matplotlib ​

展示 PIL 图片 ​

展示 Pandas Dataframe ​

展示 widget ​

Display API ​

属性 ​

#header-mark#

Display 小组件/Output 展示器

展示 Matplotlib

展示 PIL 图片

展示 Pandas Dataframe

展示 widget

Display API

属性