news 2026/7/14 14:51:12

bokeh-notebooks部署指南:将交互式图表嵌入Web应用的3种方法

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
bokeh-notebooks部署指南:将交互式图表嵌入Web应用的3种方法

bokeh-notebooks部署指南:将交互式图表嵌入Web应用的3种方法

【免费下载链接】bokeh-notebooksInteractive Web Plotting with Bokeh in IPython notebook项目地址: https://gitcode.com/gh_mirrors/bo/bokeh-notebooks

bokeh-notebooks是一个基于Bokeh的交互式Web绘图项目,通过IPython notebook提供了丰富的可视化功能。本文将详细介绍如何将Bokeh创建的交互式图表嵌入Web应用的3种实用方法,帮助开发者快速实现数据可视化的Web部署。

准备工作:环境搭建与项目获取

在开始部署之前,需要先完成基础环境的配置和项目代码的获取。

1. 克隆项目仓库

git clone https://gitcode.com/gh_mirrors/bo/bokeh-notebooks cd bokeh-notebooks

2. 配置conda环境

项目提供了完整的环境配置文件,通过以下命令可以快速搭建所需环境:

conda env create -f environment.yml conda activate bokeh-notebooks

方法一:生成独立HTML文件(适合静态网站)

最简单的部署方式是将Bokeh图表导出为独立的HTML文件,这种方式适合嵌入静态网站或本地展示。

实现步骤

  1. 在Notebook中使用output_file函数指定输出文件路径:

    from bokeh.io import output_file, show from bokeh.plotting import figure # 设置输出文件 output_file("plot.html") # 创建图表 p = figure(title="简单示例图表") p.circle([1, 2, 3], [4, 5, 6]) # 保存并显示图表 show(p)
  2. 执行代码后,会在当前目录生成plot.html文件,直接在浏览器中打开即可查看交互式图表。

应用场景

  • 个人博客文章中的数据可视化展示
  • 本地报告和演示文稿
  • 静态网站的交互式数据展示

Bokeh交互式散点图示例

方法二:组件嵌入(适合动态Web应用)

对于需要集成到现有Web应用中的场景,可以使用Bokeh的组件嵌入功能,将图表分解为HTML和JavaScript代码片段。

实现步骤

  1. 使用components函数生成HTML和JavaScript组件:

    from bokeh.embed import components from bokeh.plotting import figure # 创建图表 p = figure(title="组件嵌入示例") p.line([1, 2, 3, 4], [1, 4, 9, 16]) # 生成组件 script, div = components(p)
  2. 将生成的scriptdiv变量嵌入到Web应用的模板中:

    <!DOCTYPE html> <html> <head> <title>Bokeh组件嵌入示例</title> {{ script|safe }} </head> <body> <h1>我的交互式图表</h1> {{ div|safe }} </body> </html>

应用场景

  • Django、Flask等Web框架集成
  • 内容管理系统(CMS)中的数据可视化
  • 需要与其他Web元素交互的复杂页面

方法三:Bokeh服务器部署(适合实时交互应用)

当需要实现复杂的实时交互功能时,Bokeh服务器提供了强大的后端支持,允许Python代码直接响应前端交互事件。

实现步骤

  1. 创建一个Bokeh应用文件(例如app.py):

    from bokeh.plotting import figure, curdoc from bokeh.models import Slider # 创建图表 p = figure(title="Bokeh服务器示例") r = p.line([1, 2, 3, 4], [1, 4, 9, 16]) # 创建滑块组件 slider = Slider(start=1, end=10, value=1, title="乘法因子") # 定义回调函数 def update_data(attrname, old, new): factor = slider.value r.data_source.data['y'] = [x**2 * factor for x in [1, 2, 3, 4]] slider.on_change('value', update_data) # 将组件添加到文档 curdoc().add_root(p) curdoc().add_root(slider)
  2. 使用Bokeh服务器运行应用:

    bokeh serve --show app.py
  3. 浏览器会自动打开应用页面,地址通常为http://localhost:5006/app

应用场景

  • 实时数据监控仪表板
  • 交互式数据分析工具
  • 需要后端计算支持的复杂可视化应用

Bokeh大数据可视化示例

总结与选择建议

部署方法复杂度交互能力适用场景
独立HTML文件基础交互静态网站、本地展示
组件嵌入中等交互Web框架集成、CMS系统
Bokeh服务器高级交互实时监控、复杂应用

根据项目需求选择合适的部署方式,简单的展示需求推荐使用独立HTML文件或组件嵌入,复杂的实时交互应用则需要Bokeh服务器支持。更多详细教程可以参考项目中的tutorial/10 - Exporting and Embedding.ipynb和tutorial/11 - Running Bokeh Applications.ipynb文件。

通过这些方法,你可以轻松地将Bokeh创建的精美交互式图表集成到各种Web应用中,为用户提供出色的数据可视化体验。

【免费下载链接】bokeh-notebooksInteractive Web Plotting with Bokeh in IPython notebook项目地址: https://gitcode.com/gh_mirrors/bo/bokeh-notebooks

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/14 14:50:41

免费AI虚拟背景:obs-backgroundremoval终极使用指南

免费AI虚拟背景&#xff1a;obs-backgroundremoval终极使用指南 【免费下载链接】obs-backgroundremoval An OBS plugin for removing background in portrait images (video), making it easy to replace the background when recording or streaming. 项目地址: https://gi…

作者头像 李华
网站建设 2026/7/14 14:50:25

OpenCore Legacy Patcher完整指南:5步让你的老Mac重获新生

OpenCore Legacy Patcher完整指南&#xff1a;5步让你的老Mac重获新生 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为老款Mac无法升级最新macOS而烦恼…

作者头像 李华
网站建设 2026/7/14 14:48:31

解密OpCore Simplify:黑苹果EFI配置的智能自动化革命

解密OpCore Simplify&#xff1a;黑苹果EFI配置的智能自动化革命 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为黑苹果安装中繁琐的OpenCore配…

作者头像 李华