Panel简介
Panel 是一个用于创建交互式仪表板和可视化应用程序的 Python 库。它建立在 HoloViz 生态系统之上,与其他可视化工具(如 Bokeh、Matplotlib 和 Plotly)无缝集成。Panel 提供了一种简单而强大的方式来将各种类型的可视化和小部件组合成交互式仪表板,而无需编写大量的 JavaScript 代码。
基本概念
- 面板(Panel):Panel 是一个用于创建交互式数据应用和仪表板的 Python 库。它的设计旨在简化可视化工具的集成,使用户能够轻松地组合和布局不同类型的可视化和交互组件。
- 小部件(Widgets):Panel 提供了一系列交互式小部件,例如滑块、选择器、按钮和文本输入框。这些小部件可以与数据和可视化相结合,以实现动态交互。
- 布局(Layouts):Panel 提供了多种布局方式,可以组织和排列小部件和可视化组件。常见的布局有列(Column)、行(Row)、网格(GridSpec)和选项卡(Tabs)。
- 参数化(Parameterized):Panel 支持使用参数化类来管理应用状态。这种方法允许开发者定义具有默认值和类型的参数,从而更容易控制和更新应用状态。
- 可视化集成:Panel 能够无缝集成多种可视化库,如 Bokeh、Matplotlib、Plotly 等,使用户可以选择最适合其需求的可视化工具。
设计理念
- 简化交互式应用开发:Panel 的设计目标是简化交互式数据应用的开发流程。通过提供简单的 API 和丰富的组件,用户可以专注于应用逻辑,而不必深入了解底层的 JavaScript 或 Web 技术。
- 高可扩展性:Panel 采用模块化设计,允许用户根据需求扩展和自定义组件。这种灵活性使其适用于从简单的仪表板到复杂的数据应用的各种场景。
- 无缝集成:Panel 旨在与其他数据科学工具和可视化库无缝集成。它可以在 Jupyter Notebook 中使用,也可以作为独立的 Web 应用部署。
- 响应式设计:Panel 支持响应式设计,能够根据用户设备的不同调整布局和显示效果,确保在桌面和移动设备上的良好用户体验。
- 社区驱动和开源:Panel 是一个开源项目,受益于社区的持续贡献和支持。它是 HoloViz 生态系统的一部分,与其他工具如 HoloViews、Datashader 等共同发展。
Panel的使用
基础概念
在 Jupyter Notebook 和独立 Python 脚本中使用 Panel 非常简单。
在 Jupyter Notebook 中使用 Panel
安装 Panel: 确保已安装 Panel,可以通过以下命令安装:
pip install panel
导入 Panel: 在 Notebook 中导入 Panel,并使用 pn.extension() 来加载必要的扩展:
import panel as pn pn.extension()
创建组件: 创建小部件和可视化组件。例如,创建一个简单的滑块:
slider = pn.widgets.FloatSlider(name='Slider', start=0, end=10, value=5)
显示组件: 直接在 Notebook 单元格中显示组件,Panel 会自动渲染它:
slider
布局组件: 使用 Panel 的布局功能组合多个组件:
layout = pn.Column( "## My Panel Dashboard", slider, pn.pane.Markdown("This is a simple Panel example.") ) layout
交互功能: 通过 pn.bind 或回调函数为组件添加交互功能。例如:
def update_text(value): return f"Slider value is: {value}" text = pn.bind(update_text, slider) layout = pn.Column(slider, text) layout
在独立脚本中使用 Panel
安装 Panel: 同样,确保 Panel 已安装:
pip install panel
导入和初始化: 在脚本中导入 Panel,并初始化扩展:
import panel as pn pn.extension()
创建组件: 创建小部件和可视化组件。例如:
slider = pn.widgets.FloatSlider(name='Slider', start=0, end=10, value=5)
布局组件: 使用布局将组件组合在一起:
layout = pn.Column( "## My Panel Dashboard", slider, pn.pane.Markdown("This is a simple Panel example.") )
启动服务器: 使用 show() 方法启动一个本地服务器来展示 Panel 应用:
if __name__ == '__main__': layout.show()
这将启动一个本地 Web 服务器,并在浏览器中打开应用程序。你可以通过调整组件来观察实时更新。
基本组件
Panel 提供了一系列强大的小部件(Widgets),用于创建交互式的用户界面。这些小部件可以用于接受用户输入、显示动态内容以及触发交互行为。
滑块(Slider)
类型:
- FloatSlider: 用于选择浮点数。
- IntSlider: 用于选择整数。
用法:
import panel as pn float_slider = pn.widgets.FloatSlider(name='Float Slider', start=0.0, end=10.0, step=0.1, value=5.0) int_slider = pn.widgets.IntSlider(name='Int Slider', start=0, end=100, step=1, value=50) pn.Column(float_slider, int_slider).show()
按钮(Button)
功能:用于触发特定的操作或事件。
用法:
button = pn.widgets.Button(name='Click Me', button_type='primary') def button_click(event): print('Button clicked!') button.on_click(button_click) pn.Column(button).show()
文本输入(TextInput)
功能:用于接受用户输入的文本。
用法:
text_input = pn.widgets.TextInput(name='Text Input', placeholder='Enter text here...') def update_text(event): print(f'Text input: {text_input.value}') text_input.param.watch(update_text, 'value') pn.Column(text_input).show()
选择器(Select)
类型:
- Select: 下拉选择框。
- MultiSelect: 多选下拉框。
用法:
select = pn.widgets.Select(name='Select', options=['Option 1', 'Option 2', 'Option 3']) pn.Column(select).show()
切换按钮(Toggle)
功能:用于在开/关状态之间切换。
用法:
toggle = pn.widgets.Toggle(name='Toggle', button_type='success') pn.Column(toggle).show()
复选框(Checkbox)
功能:用于选择或取消选择某个选项。
用法:
checkbox = pn.widgets.Checkbox(name='Check me') pn.Column(checkbox).show()
日期选择器(DatePicker)
功能:用于选择日期。
用法:
date_picker = pn.widgets.DatePicker(name='Date Picker') pn.Column(date_picker).show()
文件输入(FileInput)
功能:用于上传文件。
用法:
file_input = pn.widgets.FileInput(name='File Input') pn.Column(file_input).show()
颜色选择器(ColorPicker)
功能:用于选择颜色。
用法:
color_picker = pn.widgets.ColorPicker(name='Color Picker') pn.Column(color_picker).show()
数值输入(Spinner)
功能:用于输入或选择数值。
用法:
spinner = pn.widgets.Spinner(name='Spinner', start=0, end=100, step=1, value=10) pn.Column(spinner).show()
函数绑定
在 Panel 中,将小部件与函数绑定是实现交互式更新的关键步骤。这可以通过 pn.bind 函数或参数化(Parameterized)类来实现。
- bind方法:简单且直接,适用于较小的交互场景。
- 参数化类方法:适合更复杂的应用场景,提供了更好的结构和可维护性。
使用 pn.bind
pn.bind 函数允许你将小部件的值与一个 Python 函数绑定,以便在小部件的值发生变化时自动更新输出。
示例
假设我们有一个简单的场景:根据滑块的值动态更新文本显示。
import panel as pn # 初始化 Panel 扩展 pn.extension() # 定义一个滑块小部件 slider = pn.widgets.FloatSlider(name='Slider', start=0.0, end=10.0, step=0.1, value=5.0) # 定义一个函数,根据滑块的值返回更新的文本 def update_text(value): return f'Slider value is: {value:.1f}' # 使用 pn.bind 将滑块的值与函数绑定 bound_text = pn.bind(update_text, slider) # 布局组件并展示 layout = pn.Column(slider, bound_text) layout.show()
在这个例子中,pn.bind 函数将 slider 的当前值传递给 update_text 函数,每当滑块的值改变时,文本显示会自动更新。
使用参数化类(Parameterized Class)
参数化类(Parameterized Classes)是 Panel 和 Param 库中的一个强大概念,用于创建具有动态行为的对象。它们通过参数(Parameters)来管理对象的属性和状态变化,从而实现复杂的交互功能。
概念
- 参数(Parameters):
- 参数是带有类型和约束的类属性。它们可以是数值、布尔值、字符串、对象等。
- 参数可以具有默认值、范围(如数值的上下限)、选项列表(如下拉选择)等。
- 参数化类:
- 参数化类是继承自Parameterized 的 Python 类。它可以定义多个参数,自动处理参数的验证和依赖关系。
- 通过参数化类,可以将状态管理、用户输入和应用逻辑集中到一个结构化的类中。
- 依赖和回调:
- 参数化类允许使用@param.depends 装饰器来声明方法对参数的依赖。当依赖的参数值发生变化时,自动触发这些方法。
- 这种机制实现了参数变化与逻辑更新的自动关联。
优势
- 结构化管理:参数化类将参数定义、状态管理和交互逻辑集中到一个类中,使代码更加结构化和易于维护。
- 自动化更新:通过依赖声明,参数化类自动处理参数变化的更新逻辑,减少手动回调的复杂性。
- 类型安全和验证:参数化类提供了类型安全性和参数验证功能,确保参数的值符合预期。
- 可扩展性:通过继承和组合,参数化类可以轻松扩展,以适应更复杂的应用需求。
- 与 Panel 的无缝集成:参数化类与 Panel 的小部件和布局功能无缝集成,能够快速创建复杂的交互式用户界面。
示例
import panel as pn import param # 初始化 Panel 扩展 pn.extension() # 定义一个参数化类 class InteractiveApp(param.Parameterized): # 定义参数 slider = param.Number(5.0, bounds=(0.0, 10.0)) # 定义动态更新的方法 @param.depends('slider', watch=True) def view(self): return pn.pane.Markdown(f'Slider value is: {self.slider:.1f}') # 实例化类 app = InteractiveApp() # 布局组件并展示 layout = pn.Column(app.param, app.view) layout.show()
在这个例子中,我们定义了一个参数化类 InteractiveApp,其中包含一个 slider 参数。view 方法使用 @param.depends 装饰器标记为依赖 slider 参数,并在其值发生变化时自动更新。
直接绑定小部件事件
一些小部件支持直接绑定事件处理函数,例如按钮的点击事件。
import panel as pn # 初始化 Panel 扩展 pn.extension() # 创建一个按钮 button = pn.widgets.Button(name='Click me') # 定义按钮点击的回调函数 def on_click(event): print("Button clicked!") # 绑定点击事件 button.on_click(on_click) # 布局组件并展示 layout = pn.Column(button) layout.show()
布局方式
Panel 提供了多种布局方式,帮助开发者组织和展示小部件、可视化组件以及其他内容。以下是 Panel 中常用的布局方式及其用法示例:
列布局(Column)
列布局用于将组件垂直排列。它适合用于纵向布局的场景。
示例
import panel as pn # 初始化 Panel 扩展 pn.extension() # 创建一些示例小部件 slider = pn.widgets.FloatSlider(name='Slider', start=0, end=10, value=5) button = pn.widgets.Button(name='Button', button_type='primary') text = pn.pane.Markdown("This is a column layout.") # 使用 Column 布局 column_layout = pn.Column(slider, button, text) # 显示布局 column_layout.show()
行布局(Row)
行布局用于将组件水平排列。它适合用于横向布局的场景。
示例
# 使用 Row 布局 row_layout = pn.Row(slider, button, text) # 显示布局 row_layout.show()
网格布局(GridSpec)
网格布局允许将组件放置在一个灵活的网格中,提供更复杂的布局选项。
示例
# 创建一个 GridSpec 布局 grid = pn.GridSpec(sizing_mode='stretch_both', max_width=800, max_height=400) # 将组件添加到网格中的特定位置 grid[0, 0] = slider grid[0, 1] = button grid[1, :] = text # 显示布局 grid.show()
选项卡布局(Tabs)
选项卡布局用于将组件分组到不同的选项卡中,适合用于多视图场景。
示例
# 使用 Tabs 布局 tabs = pn.Tabs( ('Slider', slider), ('Button', button), ('Text', text) ) # 显示布局 tabs.show()
布局组合
可以将不同的布局组合在一起,以创建更复杂的用户界面。
示例
# 组合 Column 和 Row 布局 combined_layout = pn.Column( pn.Row(slider, button), text ) # 显示布局 combined_layout.show()
构建仪表板
构建一个完整的仪表板是 Panel 的一大优势,通过灵活的布局方式,你可以将多个组件(如小部件、图表、文本等)组合在一起,创建一个功能齐全的交互式应用。下面是如何使用 Panel 的布局功能来创建一个简单的仪表板的步骤和示例。
步骤
- 设计布局:确定仪表板的结构,例如哪些组件需要垂直排列,哪些需要水平排列,是否需要选项卡等。
- 创建组件:根据需求创建所需的小部件和可视化组件。
- 组织布局:使用 Panel 的布局容器(如 Column、Row、GridSpec、Tabs)来组织组件。
- 展示仪表板:使用 .show() 方法在独立脚本中启动服务器,或直接在 Jupyter Notebook 中展示。
示例
下面是一个简单的仪表板示例,包括滑块、按钮、Markdown 文本和一个简单的 Matplotlib 图。
import panel as pn import numpy as np import matplotlib.pyplot as plt # 初始化 Panel 扩展 pn.extension() # 创建小部件 slider = pn.widgets.FloatSlider(name='Amplitude', start=0.1, end=10.0, value=1.0) button = pn.widgets.Button(name='Update Plot', button_type='primary') # 创建一个 Markdown 文本 markdown = pn.pane.Markdown("## Simple Dashboard\nThis dashboard demonstrates a simple use of Panel.") # 创建一个简单的 Matplotlib 图 def create_plot(amplitude): x = np.linspace(0, 10, 100) y = amplitude * np.sin(x) plt.figure(figsize=(5, 3)) plt.plot(x, y) plt.title('Sine Wave') plt.xlabel('x') plt.ylabel('Amplitude') return plt.gcf() # 绑定滑块和图更新 @pn.depends(slider.param.value) def update_plot(amplitude): return pn.pane.Matplotlib(create_plot(amplitude), tight=True) # 使用 Column 布局将组件组合成一个仪表板 dashboard = pn.Column( markdown, slider, button, update_plot ) # 在独立脚本中使用 .show() 启动仪表板 # dashboard.show() # 在 Jupyter Notebook 中直接显示 dashboard
可视化集成
在 Panel 中,可以非常方便地将多种图表库(如 Bokeh、Matplotlib、Plotly、Altair 和 Holoviews)嵌入到应用中。通过 Panel 的 pn.pane 模块,可以非常方便地将多种图表库嵌入到应用中。具体来说:
- Bokeh:使用pane.Bokeh
- Matplotlib:使用pane.Matplotlib
- Plotly:使用pane.Plotly
- Altair:使用pane.Vega
- HoloViews:使用pane.HoloViews
这些 Pane 类提供了统一的接口,使得在 Panel 应用中嵌入多种图表变得简单而高效。通过组合这些图表和其他 Panel 小部件,可以创建功能丰富且交互性强的仪表板和应用程序。
嵌入 Bokeh 图表
Bokeh 是一个用于创建交互式 Web 图表的库。Panel 提供了专门的 Pane 类来嵌入 Bokeh 图表。
示例
import panel as pn from bokeh.plotting import figure # 初始化 Panel 扩展 pn.extension('bokeh') # 创建 Bokeh 图表 p = figure(title="Simple line example", x_axis_label='x', y_axis_label='y') p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], legend_label='Temp.', line_width=2) # 使用 Pane 嵌入 Bokeh 图表 bokeh_plot = pn.pane.Bokeh(p) # 布局并展示 layout = pn.Column(bokeh_plot) layout.show()
嵌入 Matplotlib 图表
Matplotlib 是一个广泛使用的绘图库。Panel 提供了 pn.pane.Matplotlib 类来嵌入 Matplotlib 图表。
示例
import panel as pn import matplotlib.pyplot as plt import numpy as np # 初始化 Panel 扩展 pn.extension() # 创建 Matplotlib 图表 x = np.linspace(0, 10, 100) plt.figure(figsize=(5, 3)) plt.plot(x, np.sin(x)) plt.title('Sine Wave') plt.xlabel('x') plt.ylabel('sin(x)') # 使用 Pane 嵌入 Matplotlib 图表 matplotlib_plot = pn.pane.Matplotlib(plt.gcf(), tight=True) # 布局并展示 layout = pn.Column(matplotlib_plot) layout.show()
嵌入 Plotly 图表
Plotly 是一个用于创建交互式 Web 图表的库。Panel 提供了 pn.pane.Plotly 类来嵌入 Plotly 图表。
示例
import panel as pn import plotly.graph_objects as go # 初始化 Panel 扩展 pn.extension() # 创建 Plotly 图表 fig = go.Figure(data=[go.Scatter(x=[1, 2, 3, 4], y=[10, 15, 13, 17])]) fig.update_layout(title='Simple Line Chart', xaxis_title='X Axis', yaxis_title='Y Axis') # 使用 Pane 嵌入 Plotly 图表 plotly_plot = pn.pane.Plotly(fig) # 布局并展示 layout = pn.Column(plotly_plot) layout.show()
嵌入 Altair 图表
Altair 是一个基于 Vega-Lite 的声明式统计可视化库。Panel 提供了 pn.pane.Vega 类来嵌入 Altair 图表。
示例
import panel as pn import altair as alt import pandas as pd # 初始化 Panel 扩展 pn.extension() # 创建 Altair 图表 data = pd.DataFrame({ 'a': list(range(10)), 'b': [x ** 2 for x in range(10)] }) chart = alt.Chart(data).mark_line().encode( x='a', y='b' ) # 使用 Pane 嵌入 Altair 图表 altair_plot = pn.pane.Vega(chart, sizing_mode='stretch_both') # 布局并展示 layout = pn.Column(altair_plot) layout.show()
嵌入 HoloViews 图表
HoloViews 是一个用于创建动态和交互式可视化图表的库。Panel 与 HoloViews 紧密集成,可以直接嵌入 HoloViews 图表。
示例
import panel as pn import holoviews as hv from holoviews import opts import numpy as np # 初始化 Panel 扩展 pn.extension() # 创建 HoloViews 图表 hv.extension('bokeh') curve = hv.Curve((np.arange(10), np.random.randn(10))).opts(opts.Curve(width=400, height=300)) # 使用 Pane 嵌入 HoloViews 图表 holoviews_plot = pn.pane.HoloViews(curve) # 布局并展示 layout = pn.Column(holoviews_plot) layout.show()
高级功能
模版的使用
Panel 提供了多种模板(Templates)来帮助开发者快速创建美观的仪表板。这些模板提供了预定义的布局和样式,使得开发者可以专注于内容和功能的开发,而不必过多关注样式细节。
模板是包含特定布局和样式的 HTML 页面结构,Panel 提供了多种内置模板,如 BootstrapTemplate、MaterialTemplate、FastListTemplate 等。这些模板允许你将小部件和图表嵌入到标准化的页面结构中,并提供了一致的外观。
使用模板的步骤
- 选择模板:根据需求选择合适的模板,如 BootstrapTemplate、MaterialTemplate 等。
- 创建模板实例:实例化模板对象。
- 添加内容到模板:将小部件、图表和其他内容添加到模板的不同部分,如 main、sidebar、header 等。
- 展示模板:使用 .show() 方法展示完整的仪表板。
示例
下面是一个使用 BootstrapTemplate 创建简单仪表板的示例。
import panel as pn import numpy as np import holoviews as hv # 初始化 Panel 扩展 pn.extension() # 创建示例数据和图表 xs = np.linspace(0, 10, 100) curve = hv.Curve((xs, np.sin(xs))) # 创建小部件 slider = pn.widgets.FloatSlider(name='Amplitude', start=0.1, end=10.0, value=1.0) # 定义回调函数 @pn.depends(slider.param.value) def update_curve(amplitude): return hv.Curve((xs, amplitude * np.sin(xs))) # 选择模板 template = pn.template.BootstrapTemplate(title='My Dashboard') # 添加内容到模板 template.sidebar.append(slider) template.main.append(pn.pane.HoloViews(update_curve)) # 展示模板 template.show()
内置模板
Panel 提供了多种内置模板,满足不同的设计需求:
- BootstrapTemplate:基于 Bootstrap 框架,提供响应式设计。
- MaterialTemplate:基于 Material Design,提供现代化的外观。
- FastListTemplate:适用于简单快速的列表布局。
- ReactTemplate:基于 React,适合构建复杂的交互式应用。
- VanillaTemplate:一个基本的 HTML 模板,适合自定义设计。
自定义模板
如果内置模板不能满足需求,Panel 允许开发者创建自定义模板。自定义模板可以通过扩展 pn.template.BaseTemplate 类来实现,允许完全控制 HTML、CSS 和 JavaScript。
自定义扩展
在 Panel 中,你可以通过自定义 CSS 和 JavaScript 来扩展和美化你的应用。这种扩展方式允许你完全控制应用的外观和交互行为,从而实现更复杂和个性化的设计。
使用自定义 CSS
- 创建 CSS 文件:首先创建一个 .css 文件,用于定义样式规则。
- 加载 CSS 文件:使用extension(raw_css=…) 或者 pn.config.raw_css.append(…) 将自定义 CSS 加载到 Panel 应用中。
- 应用 CSS 样式:通过在组件上使用相应的类名或 ID 来应用 CSS 样式。
示例
import panel as pn # 初始化 Panel 扩展 pn.extension() # 自定义 CSS 样式 css = """ .my-button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } """ # 加载自定义 CSS pn.config.raw_css.append(css) # 创建一个按钮并应用自定义样式 button = pn.widgets.Button(name='Custom Styled Button', css_classes=['my-button']) # 布局并展示 layout = pn.Column(button) layout.show()
使用自定义 JavaScript
- 创建 JavaScript 文件:编写一个 .js 文件,定义需要的交互逻辑。
- 加载 JavaScript 文件:使用extension(js_files=…) 将自定义 JavaScript 加载到 Panel 应用中。
- 绑定 JavaScript 事件:通过 Panel 的 jslink 或者 js_on_click 等方法将 JavaScript 逻辑绑定到小部件事件上。
示例
import panel as pn # 初始化 Panel 扩展 pn.extension() # 创建一个按钮 button = pn.widgets.Button(name='Click me') # 定义 JavaScript 回调 js_code = """ console.log('Button clicked!'); alert('Button clicked!'); """ # 绑定 JavaScript 回调到按钮点击事件 button.js_on_click(args={}, code=js_code) # 布局并展示 layout = pn.Column(button) layout.show()
高级用法
- 模板和自定义资源:在使用模板时,可以通过add_variable() 和 template.add_panel() 等方法将自定义的 CSS 和 JavaScript 资源添加到模板中。
- 与其他库集成:你可以通过自定义 JavaScript 与其他前端库(如js、Three.js 等)集成,实现更复杂的可视化效果。
应用部署
在本地服务器上运行 Panel 应用非常简单,Panel 提供了多种方法来启动和运行应用。以下是几种常用的方法:
使用 panel serve 命令
这是最常用的方法,适合开发和部署 Panel 应用。
创建 Python 脚本:首先,将你的 Panel 应用代码保存到一个 Python 脚本中,例如 app.py。
import panel as pn # 初始化 Panel 扩展 pn.extension() # 创建一些简单的组件 text = pn.pane.Markdown("# Hello, Panel!") button = pn.widgets.Button(name="Click me!") # 定义布局 layout = pn.Column(text, button) # 将布局展示为应用 layout.servable()
运行 panel serve 命令:在命令行中导航到脚本所在的目录,然后运行以下命令:
panel serve app.py
这将启动一个本地服务器,通常在默认的端口 5006 上运行。你可以通过浏览器访问 http://localhost:5006/app 查看应用。
指定端口和其他选项:你可以通过命令行参数指定端口和其他选项。例如:
panel serve app.py --port 8080 --allow-websocket-origin=localhost:8080
使用 Jupyter Notebook
如果你在 Jupyter Notebook 中开发 Panel 应用,可以直接在 Notebook 中展示应用。
在 Notebook 中导入 Panel:确保已经安装和导入了 Panel。
import panel as pn # 初始化 Panel 扩展 pn.extension()
创建并展示应用:
text = pn.pane.Markdown("# Hello, Panel!") button = pn.widgets.Button(name="Click me!") layout = pn.Column(text, button) # 在 Notebook 中展示应用 layout
在 JupyterLab 中使用 Panel:确保安装了 JupyterLab 扩展以支持 Panel。
jupyter labextension install @pyviz/jupyterlab_pyviz
嵌入在 Web 应用框架中
Panel 应用也可以嵌入到其他 Web 应用框架中,如 Flask 或 Django。这通常需要一些额外的配置,以便将 Panel 的静态文件和路由集成到框架中。
使用 Flask
Flask 是一个轻量级的 Web 框架,适合将 Panel 应用嵌入其中。
示例代码
from flask import Flask, render_template_string import panel as pn # 初始化 Panel 扩展 pn.extension() # 创建 Panel 应用 text = pn.pane.Markdown("# Hello, Panel!") button = pn.widgets.Button(name="Click me!") layout = pn.Column(text, button) # 创建 Flask 应用 app = Flask(__name__) # 定义主页路由 @app.route('/') def index(): # 将 Panel 应用转换为 HTML script = layout._repr_html_() # 嵌入到 Flask 模板中 return render_template_string(""" <html> <head> <title>Flask with Panel</title> </head> <body> <div>{{ script|safe }}</div> </body> </html> """, script=script) if __name__ == '__main__': app.run(debug=True)
使用 Django
Django 是一个功能强大的 Web 框架,也可以将 Panel 应用嵌入其中。
示例代码
由于 Django 的设置相对复杂,这里是一个简化的示例:
# views.py from django.http import HttpResponse import panel as pn # 初始化 Panel 扩展 pn.extension() # 创建 Panel 应用 text = pn.pane.Markdown("# Hello, Panel!") button = pn.widgets.Button(name="Click me!") layout = pn.Column(text, button) def panel_view(request): # 将 Panel 应用转换为 HTML script = layout._repr_html_() return HttpResponse(f""" <html> <head> <title>Django with Panel</title> </head> <body> <div>{script}</div> </body> </html> """)
使用 IFrame 嵌入
如果你的 Web 应用支持 HTML 嵌入,你可以将 Panel 应用运行在独立的服务器上,并通过 <iframe> 标签嵌入。
直接在 Python 环境中运行
如果你只想快速查看应用效果,可以直接在 Python 环境中运行 layout.show():
layout.show()
这会启动一个临时的本地服务器,并在默认浏览器中打开应用。
参考链接: