第一步 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. 要将旋转器生成的 value 与 glyph 的 size 属性链接，请使用 js_link() 函数。此函数使用 JavaScript 交互式地链接两个 Bokeh 模型。传递给此函数的第一个参数是旋转器的属性（"value"），您希望将其链接到圆形 glyph。第二个属性是您要链接到旋转器的 glyph（points.glyph）。第三个参数是 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 返回这两个值的元组。因此，您需要使用 attr_selector 的 js_link() 函数来告诉 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 社区做出贡献的链接和信息。