第一步 9: 使用小部件#

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

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

添加小部件#

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

这个Bokeh文档结合了一个图表和三个小部件：

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

  • 一个用于选择数值的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轴的起点和 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服务器来构建复杂的仪表板和交互式应用程序。Bokeh服务器的一些功能包括：

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

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

  • 大型数据集的智能服务器端下采样

  • 为“大数据”提供复杂的字形重写和转换

  • 为更广泛的受众绘制和发布仪表板

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

找到这个Bokeh服务器应用的源代码在 examples/server/app/sliders.py。 有关更多Bokeh服务器应用的示例，请参见 Gallery。

另请参阅

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

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

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

下一步#

恭喜你，你已经完成了所有Bokeh的入门指南！

有关Bokeh的更多信息可在用户指南中找到。有关Bokeh所有方面的更深入信息，请参阅参考指南。

要了解更多关于如何使用Bokeh的示例，请查看Gallery和 Bokeh的GitHub仓库中的examples目录。

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