Bokeh项目实战：使用sizing_mode实现动态布局的波形调节器-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00931/article/details/148374876

Bokeh项目实战：使用sizing_mode实现动态布局的波形调节器

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

概述

本文将深入解析Bokeh可视化库中一个典型的交互式示例——波形调节器，重点探讨如何使用sizing_mode参数实现灵活的自适应布局。这个示例展示了如何结合滑块控件和绘图区域，创建一个可以实时调节波形参数的交互式应用。

核心组件解析

1. 数据准备与绘图初始化

首先创建了一个包含500个点的正弦波数据：

x = np.linspace(0, 10, 500)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))

使用figure创建绘图区域时，特别设置了sizing_mode="stretch_both"，这使得绘图区域能够随着容器大小变化而自动调整：

plot = figure(y_range=(-10, 10), width=400, height=200, 
              background_fill_color="#fafafa", sizing_mode="stretch_both")

2. 交互控件创建

示例中创建了四个滑块控件，分别控制波形的不同参数：

振幅(Amplitude)
频率(Frequency)
相位(Phase)
偏移量(Offset)

每个滑块都设置了sizing_mode="stretch_both"，确保它们能够随着父容器调整大小：

amp = Slider(start=0.1, end=10, value=1, step=.1, 
             title="Amplitude", sizing_mode="stretch_both")

3. 布局组织

控件被组织在一个垂直列中，这里使用了固定尺寸模式：

widgets = column(amp, freq, phase, offset, 
                 sizing_mode="fixed", height=250, width=150)

标题部分使用Div组件创建，并设置为宽度自适应：

heading = Div(sizing_mode="stretch_width", height=80, 
              text="In this wave example...")

最终布局将标题、控件和绘图区域组合在一起，整体采用sizing_mode="stretch_both"：

layout = column(heading, row(widgets, plot), sizing_mode="stretch_both")

sizing_mode详解

sizing_mode是Bokeh布局系统的核心参数，它决定了组件如何响应容器大小的变化：

"fixed"：固定尺寸，不随容器变化
"stretch_width"：宽度自适应，高度固定
"stretch_height"：高度自适应，宽度固定
"stretch_both"：宽高都自适应
"scale_width"：保持宽高比，调整宽度
"scale_height"：保持宽高比，调整高度
"scale_both"：保持宽高比，调整宽高

在本示例中，我们看到了多种sizing_mode的组合使用：

整体布局使用stretch_both实现完全自适应
标题使用stretch_width实现宽度自适应
控件列使用fixed保持固定尺寸

交互逻辑实现

示例使用JavaScript回调实现实时更新：

callback = CustomJS(args=dict(source=source, amp=amp, freq=freq, phase=phase, offset=offset),
                    code="""
    const A = amp.value
    const k = freq.value
    const phi = phase.value
    const B = offset.value

    const x = source.data.x
    const y = Array.from(x, (x) => B + A*Math.sin(k*x+phi))
    source.data = { x, y }
""")

这种实现方式直接在浏览器中执行，无需与Python后端通信，响应速度极快。