入门指南 9：使用小部件#

在之前的入门指南中，您使用了不同的数据源和结构来导入和过滤数据。

在本节中，您将向绘图添加交互式小部件。

添加小部件#

小部件是您可以包含在可视化中的其他视觉元素。使用小部件来显示附加信息或交互式控制 Bokeh 文档的元素，例如

此 Bokeh 文档将绘图与三个小部件结合在一起

  • 一个 Div 小部件，用于显示 HTML 文本

  • 一个 Spinner 小部件，用于选择数值

  • 一个 RangeSlider 小部件，用于调整范围

有关 Bokeh 小部件的完整列表，请参阅用户指南中Bokeh 的内置小部件。

按照以下步骤重现上面的示例

  1. 从 bokeh.models 导入 Div、RangeSlider 和 Spinner 小部件

    from bokeh.models import Div, RangeSlider, Spinner

  2. 设置您的数据、图形和渲染器

    x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [4, 5, 5, 7, 2, 6, 4, 9, 1, 3]

p = figure(x_range=(1,9), width=500, height=250)
points = p.scatter(x=x, y=y, size=30, fill_color="#21a7df")

  3. 创建一个 Div 对象，并将一些 HTML 代码作为字符串传递给它

    div = Div(
    text="""
        <p>Select the circle's size using this control element:</p>
        """,
    width=200,
    height=30,
)

  4. 创建一个 Spinner 对象

    spinner = Spinner(
    title="Circle size",  # a string to display above the widget
    low=0,  # the lowest possible number to pick
    high=60,  # the highest possible number to pick
    step=5,  # the increments by which the number can be adjusted
    value=points.glyph.size,  # the initial value to display in the widget
    width=200,  #  the width of the widget in pixels
)

  5. 要将微调器生成的值链接到字形的 size 属性，请使用 js_link() 函数。此函数使用 JavaScript 以交互方式链接两个 Bokeh 模型。传递给此函数的第一个参数是您要链接到圆形字形的微调器的属性（"value"）。第二个属性是您要链接到微调器的字形（points.glyph）。第三个参数是您要链接到微调器的 value 的字形属性

    spinner.js_link("value", points.glyph, "size")

  6. 创建一个 RangeSlider 对象

    range_slider = RangeSlider(
    title="Adjust x-axis range", # a title to display above the slider
    start=0,  # set the minimum value for the slider
    end=10,  # set the maximum value for the slider
    step=1,  # increments for the slider
    value=(p.x_range.start, p.x_range.end),  # initial values for slider
)

  7. 要将 RangeSlider 生成的值链接到现有绘图，请再次使用 js_link() 函数。但是，这次您需要一次分配两个值：绘图 x 轴的起点和终点。RangeSlider 返回这两个值的元组。因此，您需要使用 js_link() 函数的 attr_selector 来告诉 Bokeh 将元组的哪一部分分配给绘图 x 轴的起点或终点

    range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)

  8. 创建一个包含仪表板所有元素的布局，并在浏览器中显示它

    layout = layout([
    [div, spinner],
    [range_slider],
    [p],
])

show(layout)

这就是完成的示例的样子

from bokeh.layouts import layout
from bokeh.models import Div, RangeSlider, Spinner
from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [4, 5, 5, 7, 2, 6, 4, 9, 1, 3]

# create plot with circle glyphs
p = figure(x_range=(1, 9), width=500, height=250)
points = p.scatter(x=x, y=y, size=30, fill_color="#21a7df")

# set up textarea (div)
div = Div(
    text="""
          <p>Select the circle's size using this control element:</p>
          """,
    width=200,
    height=30,
)

# set up spinner
spinner = Spinner(
    title="Circle size",
    low=0,
    high=60,
    step=5,
    value=points.glyph.size,
    width=200,
)
spinner.js_link("value", points.glyph, "size")

# set up RangeSlider
range_slider = RangeSlider(
    title="Adjust x-axis range",
    start=0,
    end=10,
    step=1,
    value=(p.x_range.start, p.x_range.end),
)
range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)

# create layout
layout = layout(
    [
        [div, spinner],
        [range_slider],
        [p],
    ],
)

# show result
show(layout)

另请参阅

要了解有关 Bokeh 小部件和构建交互式仪表板的更多信息，请参阅用户指南中的小部件和 DOM 元素。

要了解有关创建交互式图例的信息，请参阅用户指南中的交互式图例。

请参阅用户指南中的JavaScript 回调，以了解有关添加自定义 JavaScript 代码的更多信息，这些代码可以与小部件等结合使用。

要了解有关将小部件和绘图组合成布局的更多信息，请参阅用户指南中的网格和布局。

将小部件与 Bokeh 服务器一起使用#

使用小部件的另一种方法是使用 Bokeh 服务器应用程序。Bokeh 包括一个独立的服务器组件。如果您想将浏览器中运行的基于 JavaScript 的可视化连接到服务器上运行的 Python 代码，请使用 Bokeh 服务器。

在命令行中使用此命令以服务器模式启动 Bokeh

bokeh serve

您可以使用 Bokeh Server 构建复杂的仪表板和交互式应用程序。Bokeh 服务器的一些功能包括

  • 驱动计算和绘图更新的 UI 小部件和绘图选择

  • 将实时数据流式传输到自动更新的绘图

  • 智能服务器端大数据集降采样

  • 用于“大数据”的复杂字形重写和转换

  • 绘图和仪表板发布，以扩大受众

这是一个简单的 Bokeh 服务器应用程序示例。调整左侧小部件中的滑块以更改右侧的正弦波

在 examples/server/app/sliders.py 查找此 Bokeh 服务器应用程序的源代码。有关 Bokeh 服务器应用程序的更多示例，请参阅示例。

另请参阅

有关使用服务器以及编写 Bokeh 服务器绘图和应用程序的信息，请参阅用户指南中的Bokeh 服务器。

有关 Bokeh 服务器应用程序的更多示例，请参阅示例。

创建更复杂的仪表板的简单方法是使用 Panel (https://panel.holoviz.org)。Panel 是一个单独的 Python 库，在后台使用 Bokeh 和 Bokeh 服务器。

下一步#

恭喜，您已完成 Bokeh 的所有入门指南！

有关 Bokeh 的更多信息，请参见用户指南。有关 Bokeh 各个方面的更深入信息，请参阅参考指南。

有关您可以使用 Bokeh 执行的操作的更多示例，请查看示例和 Bokeh GitHub 存储库中的 examples 目录。

最后，在 Bokeh 社区页面上，您可以找到有关寻求帮助以及为 Bokeh 和 Bokeh 社区做贡献的链接和信息。