绘图工具#

Bokeh 提供了许多交互工具,您可以使用这些工具来报告信息、更改绘图参数(如缩放级别或范围),或者添加、编辑或删除图形。工具可以分为四个基本类别:

Gestures

这些工具响应单一手势,例如平移动作。 手势工具的类型有:

对于每种类型的手势,任何时候只能有一个工具处于活动状态。 活动工具会在工具栏上工具图标旁边高亮显示。

操作

这些是即时或模态操作,只有在工具栏中的按钮被按下时才会激活,例如ResetToolExamineTool

检查器

这些是被动工具,以某种方式报告信息或注释图表,例如HoverToolCrosshairTool

编辑工具

这些是复杂的多手势工具,可以在图表上添加、删除或修改字形。由于它们可能同时响应多个手势,激活编辑工具时可能会停用多个单手势工具。

本章包含有关所有单独工具的信息,并描述了如何配置工具栏。

定位工具栏#

默认情况下,Bokeh 图表上方会有一个工具栏。您可以更改工具栏的位置或将其移除。

您可以通过将toolbar_location参数传递给figure()函数来指定工具栏的位置。有效值为:

  • "above"

  • "below"

  • "left"

  • "right"

如果你想完全隐藏工具栏,请传递 None

下面的代码将工具栏放置在图表下方。尝试运行代码并更改 toolbar_location 的值。

from bokeh.plotting import figure, show

p = figure(width=400, height=400,
           title=None, toolbar_location="below")

p.scatter([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

请注意,工具栏的位置与默认的坐标轴冲突。在这种情况下,将toolbar_sticky选项设置为False将会把工具栏移动到绘制坐标轴区域之外。

from bokeh.plotting import figure, show

p = figure(width=400, height=400,
           title=None, toolbar_location="below",
           toolbar_sticky=False)

p.scatter([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

指定工具#

在最低的 bokeh.models 层级,你可以通过将 Tool 对象的实例传递给 add_tools() 方法来向 Plot 添加工具:

from bokeh.models import LassoSelectTool, Plot, WheelZoomTool

plot = Plot()
plot.add_tools(LassoSelectTool())

wheel = WheelZoomTool()
plot.add_tools(wheel)

这种添加工具的方式适用于任何Bokeh PlotPlot 子类,例如 figure

您可以通过将tools参数传递给figure()函数来指定工具。tools参数接受一个工具对象列表,例如:

from bokeh.models import BoxZoomTool, ResetTool
from bokeh.plotting import figure

plot = figure(tools=[BoxZoomTool(), ResetTool()])

您还可以使用包含工具快捷方式名称的逗号分隔字符串添加多个工具:

from bokeh.plotting import figure

plot = figure(tools="pan,wheel_zoom,box_zoom,reset")

此方法不允许设置工具的属性。

通过将工具对象传递给绘图的remove_tools()方法来移除工具。

from bokeh.models import BoxSelectTool, WheelZoomTool
from bokeh.plotting import figure

tools = box, wheel = BoxSelectTool(dimensions="width"), WheelZoomTool()
plot = figure(tools=tools)

plot.remove_tools(box)

自定义工具图标#

你可以通过将工具提示传递给绘图或其任何实例(如figure())的add_tools()方法中的description关键字来更改tools工具提示。

plot.add_tools(BoxSelectTool(description="My tool"))

也可以使用icon关键字更改工具图标。

你可以传递:

  1. 一个众所周知的图标名称

    plot.add_tools(BoxSelectTool(icon="box_zoom"))
    
  2. 一个CSS选择器

    plot.add_tools(BoxSelectTool(icon=".my-icon-class"))
    
  3. 图像路径

    plot.add_tools(BoxSelectTool(icon="path/to/icon"))
    

设置活动工具#

Bokeh工具栏每种手势(拖动、滚动、点击)最多只能有一个活动工具。

然而,可以控制哪个工具是活动的。在最低的bokeh.models级别,你可以通过使用active_dragactive_inspectactive_scrollactive_tap属性来实现这一点。这些属性可以接受以下值:

  • None — 没有这种类型的活动工具

  • "auto" — Bokeh 选择此类工具中的一个作为活动工具(可能没有)

  • 一个 Tool 实例 — Bokeh 将给定的工具设置为活动工具

此外,active_inspect 工具可能接受:

  • 一系列Tool实例将被设置为活动工具

例如:

# configure so that no drag tools are active
plot.toolbar.active_drag = None

# configure so that Bokeh chooses what (if any) scroll tool is active
plot.toolbar.active_scroll = "auto"

# configure so that a specific PolySelect tap tool is active
plot.toolbar.active_tap = poly_select

# configure so that a sequence of specific inspect tools are active
# note: this only works for inspect tools
plot.toolbar.active_inspect = [hover_tool, crosshair_tool]

所有这些属性的默认值是 "auto"

您可以通过将这些属性作为关键字参数传递给figure()函数来指定活动工具。也可以传递任何一个字符串名称:

# configures the lasso tool to be active
plot = figure(tools="pan,lasso_select,box_select", active_drag="lasso_select")

切换工具栏自动隐藏#

要使您的工具栏自动隐藏,请将工具栏的 autohide 属性设置为 True。当您将 autohide 设置为 True 时,工具栏仅在鼠标位于绘图区域内时可见,否则将隐藏。

from bokeh.plotting import figure, show

# Basic plot setup
plot = figure(width=400, height=400, title='Toolbar Autohide')
plot.line([1,2,3,4,5], [2,5,8,2,7])

# Set autohide to true to only show the toolbar when mouse is over plot
plot.toolbar.autohide = True

show(plot)

样式工具覆盖#

一些Bokeh工具还具有可配置的视觉属性。

例如,各种区域选择工具和框缩放工具都有一个overlay。要为它们的线条和填充属性设置样式,请将值传递给相应的属性:

import numpy as np

from bokeh.models import BoxSelectTool, BoxZoomTool, LassoSelectTool
from bokeh.plotting import figure, show

x = np.random.random(size=200)
y = np.random.random(size=200)

# Basic plot setup
plot = figure(width=400, height=400, title='Select and Zoom',
              tools="box_select,box_zoom,lasso_select,reset")

plot.scatter(x, y, size=5)

select_overlay = plot.select_one(BoxSelectTool).overlay

select_overlay.fill_color = "firebrick"
select_overlay.line_color = None

zoom_overlay = plot.select_one(BoxZoomTool).overlay

zoom_overlay.line_color = "olive"
zoom_overlay.line_width = 8
zoom_overlay.line_dash = "solid"
zoom_overlay.fill_color = None

plot.select_one(LassoSelectTool).overlay.line_dash = [10, 10]

show(plot)

更多信息,请参阅参考指南中的条目 BoxSelectTool.overlay, BoxZoomTool.overlay, LassoSelectTool.overlay, PolySelectTool.overlay, 和 RangeTool.overlay.

平移/拖动工具#

您可以通过平移(在触摸设备上)或左键拖动(在鼠标设备上)使用这些工具。一次只能激活一个平移/拖动工具。在适用的情况下,平移/拖动工具将尊重在范围上设置的任何最大值和最小值。

BoxSelectTool#

  • 名称: 'box_select'

  • 图标: box_select_icon

框选工具允许您通过鼠标左键拖动或在绘图区域拖动手指来定义一个矩形选择区域。您可以通过将dimensions属性设置为widthheight来配置框选工具,使其仅在一个维度上进行选择,而不是默认的both

在选择完成后,所选点的索引可以从Selection对象的属性中获取,该对象用于字形数据源。例如:

source.selected.indices

在“散点”类型图标的常见情况下,将保存选定的索引。

注意

要进行多项选择,请按住SHIFT键。要清除选择,请按ESC键。

BoxZoomTool#

  • 名称: 'box_zoom'

  • 图标: box_zoom_icon

框选缩放工具允许您通过鼠标左键拖动或在绘图区域拖动手指来定义一个矩形区域,以将绘图边界缩放到该区域。

Lasso选择工具#

  • 名称: 'lasso_select'

  • 图标: lasso_select_icon

套索选择工具允许您通过左键拖动鼠标或在绘图区域拖动手指来定义任意区域进行选择。

在选择完成后,所选点的索引可以从Selection对象的属性中获取,该对象用于字形数据源。例如:

source.selected.indices

在“散点”类型图标的常见情况下,将保存选定的索引。

注意

要进行多重选择,请按下SHIFT键。要清除选择,请按下ESC键。

PanTool#

  • 名称: 'pan', 'xpan', 'ypan',

  • 图标: pan_icon

平移工具允许您通过鼠标左键拖动或在绘图区域拖动手指来平移绘图。

您可以通过将dimensions属性设置为包含widthheight的列表来配置平移工具仅作用于x轴或y轴。此外,还有工具名称'xpan''ypan',分别对应。

点击/轻触工具#

通过点击(在触摸设备上)或左键点击(在鼠标设备上)使用这些工具。一次只能激活一个点击/触摸工具。

多边形选择工具#

  • 名称: 'poly_select'

  • 图标: poly_select_icon

多边形选择工具允许您通过左键单击鼠标或在不同位置点击手指来定义任意多边形区域进行选择。

在选择完成后,所选点的索引可以从Selection对象的属性中获取,该对象用于字形数据源。例如:

source.selected.indices

在“散点”类型图标的常见情况下,将保存选定的索引。

注意

通过在画布上按下点击来完成选择。要进行多重选择,请按住SHIFT键。要清除选择,请按ESC键。

点击工具#

  • 名称: 'tap'

  • 图标: tap_icon

点击选择工具允许您通过点击鼠标左键或手指点击来选择单个点。

在选择完成后,所选点的索引可以从Selection对象的属性中获取,该对象用于字形数据源。例如:

source.selected.indices

在“散点”类型图标的常见情况下,将保存选定的索引。

注意

要进行多重选择,请按下SHIFT键。要清除选择,请按下ESC键。

滚动/缩放工具#

使用这些工具时,可以通过捏合(在触摸设备上)或滚动(在鼠标设备上)来操作。一次只能激活一个滚动/捏合工具。

WheelZoomTool#

  • 名称: 'wheel_zoom', 'xwheel_zoom', 'ywheel_zoom'

  • 图标: wheel_zoom_icon

您可以使用滚轮缩放工具来放大和缩小绘图,以当前鼠标位置为中心。它将尊重任何最小值和最大值以及范围,防止在这些值之外进行缩放。

您可以通过将dimensions属性设置为包含widthheight的列表来配置滚轮缩放工具,使其仅作用于x轴或y轴。此外,还有工具名称'xwheel_zoom''ywheel_zoom',分别对应x轴和y轴。

WheelPanTool#

  • 名称: 'xwheel_pan', 'ywheel_pan'

  • 图标: wheel_pan_icon

滚轮平移工具沿着指定的维度平移绘图窗口,而不改变窗口的纵横比。它将尊重任何最小值和最大值以及范围,防止平移超出这些值。

操作#

操作是仅在工具栏中的按钮被点击或点击时激活的操作。它们通常是模态的或立即生效的。

检查工具#

  • 名称: 'examine'

检查工具显示一个模态对话框,该对话框提供了对构成图表的每个对象的所有当前属性值的视图。

注意

将来,ExamineTool 将通过上下文菜单激活,并且适用于所有对象,而不仅仅是图表。

撤销工具#

  • 名称: 'undo'

  • 图标: undo_icon

撤销工具恢复绘图的上一个状态。

重做工具#

  • 名称: 'redo'

  • 图标: redo_icon

重做工具撤销了撤销工具执行的最后一个操作。

重置工具#

  • 名称: 'reset'

  • 图标: reset_icon

重置工具将绘图范围恢复到其原始值。

保存工具#

  • 名称: 'save'

  • 图标: save_icon

保存工具允许您保存绘图的PNG图像。默认情况下,系统会提示您输入文件名。或者,您可以自己创建工具的实例并提供文件名:

SaveTool(filename='custom_filename') # png extension not needed

无论哪种方式,文件将直接下载或根据您的浏览器打开一个模态对话框。

放大工具#

  • 名称: 'zoom_in', 'xzoom_in', 'yzoom_in'

  • 图标: zoom_in_icon

放大工具增加了图表的缩放比例。它将尊重任何最小值和最大值以及范围,防止在这些范围之外进行放大和缩小。

您可以通过将dimensions属性设置为包含widthheight的列表来配置滚轮缩放工具仅作用于x轴或y轴。此外,还有工具名称'xzoom_in''yzoom_in',分别对应x轴和y轴的缩放。

缩小工具#

  • 名称: 'zoom_out', 'xzoom_out', 'yzoom_out'

  • 图标: zoom_out_icon

缩小工具会降低图表的缩放级别。它将尊重任何最小值和最大值以及范围,防止在这些值之外进行放大和缩小。

您可以通过将dimensions属性设置为包含widthheight的列表来配置滚轮缩放工具,使其仅作用于x轴或y轴。此外,还有工具名称'xzoom_in''yzoom_in',分别对应x轴和y轴的缩放。

检查器#

检查器是被动工具,它们根据当前光标位置注释或报告有关图表的信息。在任何给定时间,可能有多个检查器处于活动状态。您可以在工具栏的检查器菜单中切换检查器的活动状态。

十字准线工具#

  • 名称: 'crosshair'

  • 菜单图标: crosshair_icon

十字准线工具在图表上绘制一个十字准线注释,以当前鼠标位置为中心。您可以通过将dimensions属性设置为widthheightboth来配置十字准线工具的尺寸。

悬停工具#

  • 名称: 'hover'

  • 菜单图标: hover_icon

悬停工具是一个被动的检查工具。它默认始终开启,但你可以在工具栏的检查器菜单中更改此设置。

基本工具提示#

默认情况下,悬停工具会生成一个“表格”工具提示,其中每一行包含一个标签及其关联的值。标签和值以(标签, 值)元组的列表形式提供。例如,左侧的工具提示是通过右侧的tooltips定义创建的。

hover_basic

hover.tooltips = [
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("radius", "@radius"),
    ("fill color", "$color[hex, swatch]:fill_color"),
    ("fill color", "$color[hex]:fill_color"),
    ("fill color", "$color:fill_color"),
    ("fill color", "$swatch:fill_color"),
    ("foo", "@foo"),
    ("bar", "@bar"),
]

$开头的字段名称是“特殊字段”。这些通常对应于绘图中的值,例如鼠标在数据或屏幕空间中的坐标。这些特殊字段在此列出:

$index

数据源中所选点的索引

$glyph_view

对命中的字形视图的引用

$name

悬停的 glyph 渲染器的 name 属性的值

$x

数据空间中光标下的x坐标

$y

光标下的数据空间中的y坐标

$sx

光标在屏幕(画布)空间中的x坐标

$sy

光标在屏幕(画布)空间中的y坐标

$snap_x

工具提示在数据空间中锚定的x坐标

$snap_y

工具提示在数据空间中锚定的y坐标

$snap_sx

工具提示在屏幕(画布)空间中锚定的x坐标

$snap_sy

工具提示在屏幕(画布)空间中锚定的y坐标

$color

从数据源获取颜色,语法为:$color[options]:field_name。 可用的选项有:hex(将颜色显示为十六进制值), swatch(从数据源获取的颜色数据显示为一个小颜色框)。

$swatch

数据源中的颜色数据显示为一个小颜色框。

此外,某些字形可能会报告特定于该字形的附加数据

$indices

数据源中所有选定点的索引

$segment_index

所选子线的段索引(仅适用于多线字形)

$image_index

图像数组中的像素索引(仅限图像字形)

@开头的字段名称与ColumnDataSource中的列相关联。例如,字段名称"@price"将在触发悬停时显示"price"列中的值。如果悬停是针对第17个字形实例,则悬停工具提示将显示第17个价格值。

请注意,如果列名包含空格,则必须用大括号括起来。例如,配置 @{adjusted close} 将显示名为 "adjusted close" 的列中的值。

有时,特别是在堆叠图表中,希望允许间接指定列名。在这种情况下,使用字段名@$name来查找悬停的图形渲染器上的name字段,并使用该值作为列名。例如,如果您悬停时名称为"US East",那么@$name等同于@{US East}

以下是一个完整的示例,展示了如何通过将tooltips参数设置为figure来配置和使用悬停工具:

from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(
    x=[1, 2, 3, 4, 5],
    y=[2, 5, 8, 2, 7],
    desc=['A', 'b', 'C', 'd', 'E'],
))

TOOLTIPS = [
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("desc", "@desc"),
]

p = figure(width=400, height=400, tooltips=TOOLTIPS,
           title="Mouse over the dots")

p.scatter('x', 'y', size=20, source=source)

show(p)

点击测试行为#

悬停工具显示与单个图形相关的工具提示。您可以通过mode属性配置这些工具提示以不同的方式激活:

"mouse":

只有当鼠标直接悬停在一个字形上时

"vline":

每当鼠标位置的垂直线与字形相交时

"hline":

每当鼠标位置的水平线与字形相交时

默认配置是 mode = "mouse"。请参见上面的 基本工具提示 示例。下面的示例在 格式化工具提示字段 中展示了 mode = "vline"

格式化工具提示字段#

默认情况下,字段的值(例如@foo)以基本数字格式显示。要控制值的格式,您可以通过在字段末尾附加指定格式(用大括号括起来)来修改字段。以下是一些示例。

"@foo{0,0.000}"    # formats 10000.1234 as: 10,000.123

"@foo{(.00)}"      # formats -10000.1234 as: (10000.123)

"@foo{($ 0.00 a)}" # formats 1230974 as: $ 1.23 m

上面的示例都使用了默认的格式化方案。您还可以指定其他格式化方案:

"numeral":

提供了多种格式用于数字、货币、字节、时间和百分比的显示。完整的格式集可以在NumeralTickFormatter参考文档中找到。

"datetime":

提供日期和时间值的格式。完整的格式集列在DatetimeTickFormatter参考文档中。

"printf":

提供类似于C风格的“printf”类型说明符的格式。有关完整详细信息,请参阅 PrintfTickFormatter 参考文档。

您可以通过配置悬停工具的formatters属性来添加这些。此属性将工具提示变量映射到格式方案。例如,要使用"datetime"方案来格式化列"@{close date}",请设置值:

hover_tool.formatters = { "@{close date}": "datetime"}

您还可以为“特殊变量”提供格式化程序,例如 "$x"

hover_tool.formatters = { "$x": "datetime"}

如果没有为列名指定格式化程序,则默认使用"numeral"格式化程序。

请注意,格式规范也适用于包含空格的列名。例如,@{adjusted close}{($ 0.00 a)} 对名为“adjusted close”的列应用格式。

下面的示例代码配置了一个HoverTool,并为不同的字段使用了不同的格式化器:

HoverTool(
    tooltips=[
        ( 'date',   '@date{%F}'            ),
        ( 'close',  '$@{adj close}{%0.2f}' ), # use @{ } for field names with spaces
        ( 'volume', '@volume{0.00 a}'      ),
    ],

    formatters={
        '@date'        : 'datetime', # use 'datetime' formatter for '@date' field
        '@{adj close}' : 'printf',   # use 'printf' formatter for '@{adj close}' field
                                     # use default 'numeral' formatter for other fields
    },

    # display a tooltip whenever the cursor is vertically in line with a glyph
    mode='vline'
)

您可以通过将鼠标悬停在下面的图表上来查看此配置生成的输出:

CustomJSHover 模型允许您使用 JavaScript 指定一个自定义格式化程序,可以在工具提示中显示派生量。

图片悬停#

您可以使用悬停工具来检查可能包含数据层的图像字形,这些数据层位于相应的 ColumnDataSource 中:

import numpy as np

from bokeh.plotting import figure, show

ramp = np.array([np.linspace(0, 10, 200)]*20)
steps = np.array([np.linspace(0, 10, 10)]*20)
bitmask = np.random.rand(25, 10) > 0.5

data = dict(image=[ramp, steps, bitmask],
            squared=[ramp**2, steps**2, bitmask**2],
            pattern=['smooth ramp', 'steps', 'bitmask'],
            x=[0, 0, 25],
            y=[5, 20, 5],
            dw=[20,  20, 10],
            dh=[10,  10, 25])

TOOLTIPS = [
    ('name', "$name"),
    ('index', "$index"),
    ('pattern', '@pattern'),
    ("x", "$x"),
    ("y", "$y"),
    ("value", "@image"),
    ('squared', '@squared'),
]

p = figure(x_range=(0, 35), y_range=(0, 35), tools='hover,wheel_zoom', tooltips=TOOLTIPS)

p.image(source=data, image='image', x='x', y='y', dw='dw', dh='dh',
        palette="Inferno256", name="Image Glyph")

show(p)

在这个例子中,定义了三种图像模式,rampsteps,和bitmask。悬停工具提示显示图像的索引,模式的名称,光标的xy位置,以及相应的值和值的平方。

自定义工具提示#

你可以为工具提示提供一个自定义的HTML模板。要做到这一点,传递一个HTML字符串,其中包含Bokeh工具提示字段名称符号,以便在需要替换的地方进行替换。上述所有关于格式的信息仍然适用。请注意,你也可以在列名后使用{safe}格式来禁用数据源中HTML的转义。请参见下面的示例:

from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(
    x=[1, 2, 3, 4, 5],
    y=[2, 5, 8, 2, 7],
    desc=['A', 'b', 'C', 'd', 'E'],
    imgs=[
        'https://docs.bokeh.org/static/snake.jpg',
        'https://docs.bokeh.org/static/snake2.png',
        'https://docs.bokeh.org/static/snake3D.png',
        'https://docs.bokeh.org/static/snake4_TheRevenge.png',
        'https://docs.bokeh.org/static/snakebite.jpg',
    ],
    fonts=[
        '<i>italics</i>',
        '<pre>pre</pre>',
        '<b>bold</b>',
        '<small>small</small>',
        '<del>del</del>',
    ],
))

TOOLTIPS = """
    <div>
        <div>
            <img
                src="@imgs" height="42" alt="@imgs" width="42"
                style="float: left; margin: 0px 15px 15px 0px;"
                border="2"
            ></img>
        </div>
        <div>
            <span style="font-size: 17px; font-weight: bold;">@desc</span>
            <span style="font-size: 15px; color: #966;">[$index]</span>
        </div>
        <div>
            <span>@fonts{safe}</span>
        </div>
        <div>
            <span style="font-size: 15px;">Location</span>
            <span style="font-size: 10px; color: #696;">($x, $y)</span>
        </div>
    </div>
"""

p = figure(width=400, height=400, tooltips=TOOLTIPS,
           title="Mouse over the dots")

p.scatter('x', 'y', size=20, source=source)

show(p)

另请参阅

有关在Bokeh中使用工具提示的更多一般信息,请参见工具提示

编辑工具#

编辑工具提供了通过添加、修改和删除ColumnDataSource数据来在客户端绘制和编辑图形的功能。

所有的编辑工具共享少量的关键绑定:

SHIFT

用于添加到选择或开始绘制的修饰键

BACKSPACE

删除选中的字形

ESC

清除选择

注意

在MacBooks和一些其他键盘上,BACKSPACE键被标记为“delete”。

BoxEditTool#

  • 名称: 'box_edit'

  • 菜单图标: box_edit_icon

BoxEditTool() 允许您通过编辑底层的 ColumnDataSource 数据在一个或多个渲染器上绘制、拖动和删除 Rect 字形。与其他绘图工具一样,您必须将要编辑的渲染器作为列表传递:

r1 = p.rect('x', 'y', 'width', 'height', source=source)
r2 = p.rect('x', 'y', 'width', 'height', source=source2)
tool = BoxEditTool(renderers=[r1, r2])

该工具会自动修改数据源中与xywidthheight值对应的列。在添加新点时,数据源中的任何额外列将用其各自的默认值填充。任何新添加的点将被插入到第一个提供的渲染器的ColumnDataSource中。

交互工具默认值#

列的默认值是基于以下顺序计算的:

  1. 工具的default_overrides,由用户提供。

  2. 数据源的default_values,这些值由用户提供。

  3. 数据源的推断默认值,这些值由数据源根据列的dtype或内容计算得出。

  4. 工具的 empty_value,由用户提供,是在前面的步骤中无法确定合理值时的最后手段。

限制可以绘制的元素数量通常很有用。例如,在指定一定数量的感兴趣区域时。使用num_objects属性,您可以确保一旦达到限制,最旧的框将从队列中弹出,以便为新添加的框腾出空间。

Animation showing box draw, select, and delete actions

上面的动画展示了支持的工具操作,通过光标周围的圆圈突出显示鼠标操作,并通过显示按下的键来突出显示按键操作。BoxEditTool可以在图表上添加移动删除框:

Add box

按住Shift键,然后在图表上任意位置点击并拖动,或轻按一次开始绘制。移动鼠标并再次轻按以完成绘制。

Move box

点击并拖动现有的框。一旦你松开鼠标按钮,框就会被放下。

Delete box

点击一个框以选择它,然后在鼠标位于绘图区域内时按下退格键。

移动删除多个框:

Move selection

使用SHIFT+点击(或其他选择工具)选择框,然后在图表上的任何位置拖动。选择并拖动特定框将同时移动两者。

Delete selection

使用SHIFT+点击(或其他选择工具)选择框,然后在鼠标位于绘图区域内时按下BACKSPACE键。

手绘工具#

  • 名称: 'freehand_draw'

  • 菜单图标:freehand_draw_icon

FreehandDrawTool() 允许使用 PatchesMultiLine 图元自由绘制线条和多边形,通过编辑底层的 ColumnDataSource 数据。与其他绘图工具一样,您必须将要编辑的渲染器作为列表传递:

r = p.multi_line('xs', 'ys' source=source)
tool = FreehandDrawTool(renderers=[r])

该工具会自动修改数据源中与xsys值对应的列。数据源中的任何额外列将根据交互工具默认值程序在添加新点时进行填充。任何新添加的点将被插入到第一个提供的渲染器的ColumnDataSource中。

限制可以绘制的元素数量通常也很有用。例如,在指定特定数量的感兴趣区域时。使用num_objects属性,您可以确保一旦达到限制,最旧的补丁/多行将从队列中弹出,为新添加的补丁/多行腾出空间。

Animation showing freehand drawing and delete actions

上面的动画展示了支持的工具操作,通过光标周围的圆圈突出显示鼠标操作,并通过显示按下的键来突出显示按键操作。PolyDrawTool 可以绘制删除补丁和多线:

Draw patch/multi-line

点击并拖动以开始绘制,释放鼠标按钮以完成绘制。

Delete patch/multi-line

点击一条线或补丁以选择它,然后在鼠标位于绘图区域内时按下退格键。

删除多个补丁/行:

Delete selection

使用SHIFT+点击(或其他选择工具)选择补丁/线条,然后在鼠标位于绘图区域内时按下BACKSPACE键。

点绘制工具#

  • 名称: 'point_draw'

  • 菜单图标: point_draw_icon

PointDrawTool() 允许您通过编辑底层的 ColumnDataSource 数据,在一个或多个渲染器上添加、拖动和删除点状图形(XYGlyph 类型)。与其他绘图工具一样,您必须将要编辑的渲染器作为列表传递:

c1 = p.circle('x', 'y', 'width', 'height', source=source)
r1 = p.rect('x', 'y', 0.1, 0.1, source=source2)
tool = PointDrawTool(renderers=[c1, r1])

该工具会自动修改数据源中与图标的xy值对应的列。数据源中的任何额外列在添加新点时将根据交互工具默认值程序进行填充。任何新添加的点将被插入到第一个提供的渲染器的ColumnDataSource中。

限制可以绘制的元素数量通常也很有用。使用num_objects属性,您可以确保一旦达到限制,最旧的点将从队列中弹出,以便为新添加的点腾出空间。

Animation showing point draw, drag, select, and delete actions

上面的动画展示了支持的工具操作,通过光标周围的圆圈突出显示鼠标操作,并通过显示按下的键来突出显示按键操作。PointDrawTool可以在图表上添加移动删除点状符号:

Add point

点击图表的任意位置。

Move point

点击并拖动现有的点。一旦你松开鼠标按钮,点就会被放下。

Delete point

点击一个点以选择它,然后在鼠标位于绘图区域内时按下退格键。

移动删除多个点一次:

Move selection

使用SHIFT+点击(或其他选择工具)选择点,然后在图表上任意位置拖动。选择并拖动特定点将同时移动两者。

Delete selection

使用SHIFT+点击(或其他选择工具)选择点,然后在鼠标位于绘图区域内时按下BACKSPACE键。

PolyDraw工具#

  • 名称: 'poly_draw'

  • 菜单图标:poly_draw_icon

PolyDrawTool() 允许您通过编辑底层的 ColumnDataSource 数据,在一个或多个渲染器上绘制、选择和删除 PatchesMultiLine 图形。与其他绘图工具一样,您必须将要编辑的渲染器作为列表传递。

该工具会自动修改数据源中与xsys值对应的列。数据源中的任何额外列将根据交互工具默认值程序在添加新点时进行填充。任何新添加的补丁或多线将被插入到第一个提供的渲染器的ColumnDataSource中。

限制可以绘制的元素数量通常也很有用。例如,在指定特定数量的感兴趣区域时。使用num_objects属性,您可以确保一旦达到限制,最旧的补丁/多行将从队列中弹出,为新添加的补丁/多行腾出空间。

如果提供了一个带有点状符号的vertex_renderer,PolyDrawTool将使用它来显示所有提供的渲染器上的多线/多边形的顶点。这也启用了在绘制时捕捉现有顶点的能力。

Animation showing polygon draw, select, and delete actions

上面的动画展示了支持的工具操作,通过光标周围的圆圈突出显示鼠标操作,并通过显示按下的键来突出显示按键操作。PolyDrawTool 可以添加移动删除补丁和多线:

Add patch/multi-line

点击以添加第一个顶点,然后使用点击添加每个后续顶点。要完成绘制操作,请点击以插入最后一个顶点或按下ESC键。

Move patch/multi-line

点击并拖动现有的补丁/多行。一旦松开鼠标按钮,点将被放置。

Delete patch/multi-line

点击一个补丁/多行以选择它,然后在鼠标位于绘图区域内时按下退格键。

多边形编辑工具#

  • 名称: 'poly_edit'

  • 菜单图标: poly_edit_icon

PolyEditTool() 允许您编辑一个或多个 PatchesMultiLine 图标的顶点。您可以使用 renderers 属性定义要编辑的图标。您可以使用 vertex_renderer 定义顶点的渲染器。它必须渲染一个点状的图标(XYGlyph 类型)。

该工具会自动修改数据源上与xsys值对应的列。数据源中的任何额外列在添加新点时将根据交互工具默认值程序进行填充。

Animation showing polygon and vertex drag, select, and delete actions

上面的动画展示了支持的工具操作,通过光标周围的圆圈突出显示鼠标操作,并通过显示按下的键来突出显示按键操作。PolyEditTool 可以在现有的面片和多线上添加移动删除顶点:

Show vertices

点击现有的补丁或多行。

Add vertex

点击现有的顶点以选择它。工具将绘制下一个点。要添加它,请点击新位置。要完成编辑并添加一个点,请点击。否则按ESC键取消。

Move vertex

拖动现有的顶点并松开鼠标按钮以释放它。

Delete vertex

选择一个或多个顶点后,当鼠标光标位于绘图区域内时,按退格键。

控制细节层次#

尽管HTML画布可以轻松显示数万甚至数十万个字形,但这样做可能会对交互性能产生不利影响。为了适应大数据量,Bokeh图表在客户端提供了“细节层次”(LOD)功能。

注意

处理非常大的数据量时,另一个选择是使用Bokeh服务器在数据发送到浏览器之前对其进行降采样。超过一定数据量后,这种方法就不可避免了。更多信息请参见Bokeh server

为了在处理大数据量时保持性能,图表在交互操作期间(例如平移或缩放)仅绘制一小部分数据点。Plot 对象上有四个属性控制LOD行为:

lod_factor = 10#
Type:

Int

在应用细节层次抽稀时使用的抽稀因子。

lod_interval = 300#
Type:

Int

交互工具事件启用细节层次下采样的时间间隔(以毫秒为单位)。

lod_threshold = 2000#
Type:

Nullable(Int)

多个数据点,超过此数量时,字形渲染器可能会执行细节层次的下采样。设置为None以禁用任何细节层次的下采样。

lod_timeout = 500#
Type:

Int

检查交互工具事件是否仍在发生的超时时间(以毫秒为单位)。一旦启用了细节层次模式,每 lod_timeout 毫秒进行一次检查。如果没有发生交互工具事件,则禁用细节层次模式。