Bokeh项目指南：如何将可视化嵌入网页-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01196/article/details/148374597

Bokeh项目指南：如何将可视化嵌入网页

bokeh bokeh/bokeh: 是一个用于创建交互式图形和数据的 Python 库。适合用于数据可视化、数据分析和呈现，以及创建动态的 Web 应用。特点是提供了一种简洁、直观的 API 来描述和处理数据，并生成交互式的可视化效果。项目地址: https://gitcode.com/gh_mirrors/bo/bokeh

概述

Bokeh是一个强大的Python交互式可视化库，它允许开发者创建丰富的可视化图表并将其嵌入到网页中。本文将详细介绍Bokeh提供的多种嵌入方式，帮助开发者根据不同的应用场景选择最合适的方案。

独立文档与应用程序的区别

在开始之前，我们需要明确两种主要的Bokeh输出类型：

独立文档(Standalone Documents)：这些文档不需要Bokeh服务器即可工作，它们包含所有必要的HTML、CSS和JavaScript代码，可以直接嵌入到网页中。
Bokeh应用程序(Bokeh Applications)：这些应用需要Bokeh服务器支持，可以实现更复杂的交互功能，如实时Python回调。

独立文档嵌入方法

1. 生成完整HTML文件

使用file_html函数可以生成包含Bokeh图表的完整HTML页面：

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

plot = figure()
plot.scatter([1,2], [3,4])

html = file_html(plot, CDN, "我的图表")

这种方法适合需要完全控制HTML输出的场景，比如在Flask等Web框架中使用。

特点：

生成自包含的HTML文件
支持自定义模板
文件可移植性强

2. JSON数据嵌入

通过json_item函数可以将图表数据转换为JSON格式，然后在网页中使用JavaScript渲染：

p = figure()
p.scatter(x, y)

item_text = json.dumps(json_item(p, "myplot"))

在HTML中使用：

item = JSON.parse(item_text);
Bokeh.embed.embed_item(item);

适用场景：

需要动态加载图表数据的Web应用
前后端分离的架构

3. 组件化嵌入

components函数将图表分解为脚本和div元素，可以灵活地嵌入到现有网页中：

from bokeh.plotting import figure
from bokeh.embed import components

plot = figure()
plot.scatter([1,2], [3,4])

script, div = components(plot)

输出结构：

script：包含图表数据的JavaScript代码
div：图表渲染的目标容器

优势：

可以同时嵌入多个图表
支持灵活的页面布局
适合内容管理系统(CMS)集成

4. 自动加载脚本

autoload_static函数生成一个自包含的脚本标签，会自动加载并渲染图表：

from bokeh.resources import CDN
from bokeh.plotting import figure
from bokeh.embed import autoload_static

plot = figure()
plot.scatter([1,2], [3,4])

js, tag = autoload_static(plot, CDN, "static/js/myplot.js")

特点：

最简单的嵌入方式
只需一个脚本标签即可完成嵌入
脚本会自动检查并加载BokehJS

Bokeh应用程序嵌入方法

1. 应用文档嵌入

使用server_document函数可以嵌入整个Bokeh服务器应用：

from bokeh.embed import server_document
script = server_document("https://demo.bokeh.org/sliders")

特点：

每次页面加载都会创建新会话
适合不需要用户特定定制的场景

2. 应用会话嵌入

server_session函数允许嵌入特定的会话，适合需要定制化的场景：

from bokeh.client import pull_session
from bokeh.embed import server_session

with pull_session(url="http://localhost:5006/sliders") as session:
    # 定制会话
    session.document.roots[0].children[1].title.text = "用户专属图表"
    
    # 生成嵌入脚本
    script = server_session(session_id=session.id, url='http://localhost:5006/sliders')

适用场景：

需要为不同用户提供个性化视图
需要保持会话状态的复杂应用

BokehJS资源加载

无论采用哪种嵌入方式，通常都需要在页面中加载BokehJS资源。核心资源包括：

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-x.y.z.min.js"
        crossorigin="anonymous"></script>

根据功能需求，可能还需要加载以下附加资源：

bokeh-widgets-x.y.z.min.js：支持小部件
bokeh-tables-x.y.z.min.js：支持数据表格
bokeh-gl-x.y.z.min.js：支持WebGL
bokeh-mathjax-x.y.z.min.js：支持数学公式

安全考虑

为了增强安全性，建议使用Subresource Integrity(SRI)哈希：

import bokeh.resources
bokeh.resources.get_sri_hashes_for_version("2.2.0")

然后在script标签中添加integrity属性：

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.0.min.js"
        integrity="sha384-5Y+xuMRAbgBj/2WKUiL8yzV4fBFic1HJPo2hT3pq2IsEzbsJjj8kT2i0b1lZ7C2N"
        crossorigin="anonymous"></script>