这个直方图非常混乱，因为有 16 家航空公司在同一图表上绘制！ 如果想比较航空公司，由于信息重叠，这几乎是不可能的。 幸运的是，我们可以添加小部件（widgets）以使绘图更清晰并实现快速比较。
创建交互的小部件一旦我们在 Bokeh 中创建基本图形，通过窗口小部件添加交互相对简单。 我们想要的第一个小部件是一个选择框，允许读者选择要显示的航空公司。 该控件将是一个复选框，允许根据需要进行尽可能多的选择，并在 Bokeh 中称为 “CheckboxGroup” 。 为了制作选择工具，我们导入 CheckboxGroup 类并使用两个参数来创建一个实例：labels 是想要在每个框旁边显示的值和 active：初始选择的值。 以下是包括所有航空公司的 CheckboxGroup 的代码。
from bokeh.models.widgets import CheckboxGroup # Create the checkbox selection element, available carriers is a # list of all airlines in the data carrier_selection = CheckboxGroup(labels=available_carriers, active = [0, 1])Bokeh 复选框中的标签必须是字符串，而活动值是整数。 这意味着在图形中 \'AirTran Airways Corporation\' 对应数字 0 ，\'Alaska Airlines Inc.\' 对应数值 1。 当想要将所选复选框与航空公司匹配时，需要确保查找与所选整数活动值关联的字符串名称。 我们可以使用小部件的 .labels 和 .active 属性来做到这一点：
# Select the airlines names from the selection values [carrier_selection.labels[i] for i in carrier_selection.active] out: [\'AirTran Airways Corporation\', \'Alaska Airlines Inc.\']制作复选的小部件后，需要将选定的航空公司复选框链接到图表上显示的信息。 这是使用 CheckboxGroup 的 .on_change 方法和我们定义的 update 函数完成的。 update 函数总是有三个参数：attr ，old，new 并根据选择控件更新绘图。 我们更改图表上显示的数据的方法是改变我们传递给 make_plot 函数中的 glyph(s) 的数据源。 这可能听起来有点抽象，所以这里是有一个 update 函数的例子，它改变了直方图以显示所选的航空公司：
# Update function takes three default parameters def update(attr, old, new): # Get the list of carriers for the graph carriers_to_plot = [carrier_selection.labels[i] for i in carrier_selection.active] # Make a new dataset based on the selected carriers and the # make_dataset function defined earlier new_src = make_dataset(carriers_to_plot, range_start = -60, range_end = 120, bin_width = 5) # Update the source used in the quad glpyhs src.data.update(new_src.data)在这里，我们将检查基于 CheckboxGroup 中所选航空公司显示的航空公司列表。 此列表将传递给 make_dataset 函数，该函数返回一个新的列数据源。 我们通过调用 src.data.update 并从新数据源传入数据来更新 glyphs 中使用的源的数据。 最后，为了将 carrier_selection 小部件中的更改链接到 update 函数，我们必须使用 .on_change 方法（称为事件处理程序）。
# Link a change in selected buttons to the update function carrier_selection.on_change(\'active\', update)只要选择或取消选择不同的航空公司，就会调用更新功能。 最终结果是在直方图上仅绘制了与所选航空公司相对应的图形 ，如下所示：
现在我们知道了创建控件的基本工作流程，可以添加更多元素。 每次，我们创建窗口小部件，编写更新函数以更改绘图上显示的数据，并使用事件处理程序将更新功能链接到窗口小部件。 我们甚至可以通过重写函数来从多个元素中使用相同的更新函数，以从小部件中提取需要的值。 为了练习，我们将添加两个额外的控件：一个 Slider，用于选择直方图的 bin 宽度;一个 RangeSlider，用于设置要显示的最小和最大延迟。 以下是制作这些小部件和新的 update 函数的代码：
# Slider to select the binwidth, value is selected number binwidth_select = Slider(start = 1, end = 30, step = 1, value = 5, title = \'Delay Width (min)\') # Update the plot when the value is changed binwidth_select.on_change(\'value\', update) # RangeSlider to change the maximum and minimum values on histogram range_select = RangeSlider(start = -60, end = 180, value = (-60, 120), step = 5, title = \'Delay Range (min)\') # Update the plot when the value is changed range_select.on_change(\'value\', update) # Update function that accounts for all 3 controls def update(attr, old, new): # Find the selected carriers carriers_to_plot = [carrier_selection.labels[i] for i in carrier_selection.active] # Change binwidth to selected value bin_width = binwidth_select.value # Value for the range slider is a tuple (start, end) range_start = range_select.value[0] range_end = range_select.value[1] # Create new ColumnDataSource new_src = make_dataset(carriers_to_plot, range_start = range_start, range_end = range_end, bin_width = bin_width) # Update the data on the plot src.data.update(new_src.data)标准的 slider 和 range slider 如下所示：