Bokeh教程：使用CustomJS动态控制DataTable列的可见性

聖光之護

发布： 2025-11-30 11:59:21

原创

211人浏览过

bokeh教程：使用customjs动态控制datatable列的可见性

本教程详细讲解如何利用Bokeh的`CustomJS`回调函数，结合`MultiChoice`小部件，实现`DataTable`列的动态显示与隐藏。文章重点指出JavaScript布尔类型大小写敏感的常见陷阱，并提供修正后的代码示例，帮助开发者构建交互式数据表格，提升用户体验。

Bokeh DataTable列动态可见性控制

在交互式数据可视化应用中，根据用户选择动态调整数据表格（DataTable）的显示内容是一项常见需求。Bokeh提供强大的`CustomJS`回调机制，允许开发者在浏览器端直接执行JavaScript代码，从而实现高性能的客户端交互。本文将详细介绍如何结合`MultiChoice`小部件和`CustomJS`，实现`DataTable`列的动态可见性控制。

问题场景与初步尝试

假设我们有一个`DataTable`，其中包含多列数据。我们希望通过一个`MultiChoice`小部件，让用户选择需要显示的列，未被选择的列则保持隐藏状态。一个常见的实现思路是，当`MultiChoice`的值发生变化时，通过`CustomJS`遍历`DataTable`的列，并根据选择结果更新其`visible`属性。

以下是一个初始的代码片段，展示了这种思路：

import pandas as pd
from bokeh.plotting import show
from bokeh.models import ColumnDataSource, CustomJS, MultiChoice
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import column
<h1>示例数据，包含多列</h1><p>data = {
'Li': [1, 2, 3],
'Be': [4, 5, 6],
'B': [7, 8, 9],
'C': [10, 11, 12],
'N': [13, 14, 15]
}
df = pd.DataFrame(data)</p><h1>准备数据源，包含所有列</h1><p>filtered_table_data = df
filtered_table_source = ColumnDataSource(data=filtered_table_data)</p><h1>初始化DataTable列</h1><h1>假设初始时，'Li'和'Be'是可见的，其他列是隐藏的</h1><p>initial_visible_columns = ['Li', 'Be']
filtered_table_cols = []
for col_name in df.columns:
is_visible_initially = col_name in initial_visible_columns
filtered_table_cols.append(TableColumn(field=col_name, title=col_name, width=100, visible=is_visible_initially))</p><h1>创建DataTable</h1><p>filtered_table = DataTable(source=filtered_table_source, columns=filtered_table_cols, width=600, height=200)</p><h1>创建MultiChoice小部件</h1><h1>选项包含所有列名</h1><p>multi_choice_options = df.columns.tolist()</p><h1>初始选中值与DataTable的初始可见列匹配</h1><p>multi_choice = MultiChoice(value=initial_visible_columns, options=multi_choice_options, title='Select elements:')</p><h1>初始CustomJS回调（存在问题）</h1><p>callback_initial = CustomJS(args=dict(multi_choice=multi_choice, filtered_table=filtered_table), code="""
// 首先将所有列设为不可见
for (var i=0; i<filtered_table.columns.length; i++) {
filtered_table.columns[i].visible = False; // 错误：应为false
}</p><pre class="brush:php;toolbar:false;">// 然后根据multi_choice的当前选择，将对应列设为可见
for (var i=0; i<filtered_table.columns.length; i++) {
    for (var j=0; j<multi_choice.value.length; j++) {
        if (filtered_table.columns[i].field == multi_choice.value[j]) {
            filtered_table.columns[i].visible = True; // 错误：应为true
            break; // 找到匹配项后，无需继续检查该列的其他选项
        }
    }
}
filtered_table.change.emit(); // 触发DataTable的更新

登录后复制

""")

Natural Language Playlist

探索语言和音乐之间丰富而复杂的关系，并使用 Transformer 语言模型构建播放列表。

查看详情

multi_choice.js_on_change("value", callback_initial)

show(column(multi_choice, filtered_table)) # 运行此段代码会发现DataTable列无变化

核心问题：JavaScript布尔类型的大小写敏感性

当尝试运行上述代码时，用户可能会发现`DataTable`的列并没有按照预期进行显示或隐藏。问题症结在于`CustomJS`回调函数中的布尔值赋值。在Python中，布尔类型使用`True`和`False`（首字母大写），但在JavaScript中，布尔字面量是`true`和`false`（全小写）。`CustomJS`在浏览器端执行的是纯JavaScript代码，因此必须遵循JavaScript的语法规范。

错误的写法：

filtered_table.columns[i].visible = True; // 这是Python的布尔值

登录后复制

正确的写法：

filtered_table.columns[i].visible = true; // 这是JavaScript的布尔值

登录后复制

修正后的CustomJS回调实现

理解了布尔类型的大小写差异后，我们可以轻松修正`CustomJS`回调函数。修正后的代码将确保`DataTable`的列可见性能够正确响应`MultiChoice`小部件的更改。

import pandas as pd
from bokeh.plotting import show
from bokeh.models import ColumnDataSource, CustomJS, MultiChoice
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import column
<h1>示例数据，包含多列</h1><p>data = {
'Li': [1, 2, 3],
'Be': [4, 5, 6],
'B': [7, 8, 9],
'C': [10, 11, 12],
'N': [13, 14, 15]
}
df = pd.DataFrame(data)</p><h1>准备数据源，包含所有列</h1><p>filtered_table_data = df
filtered_table_source = ColumnDataSource(data=filtered_table_data)</p><h1>初始化DataTable列</h1><h1>假设初始时，'Li'和'Be'是可见的，其他列是隐藏的</h1><p>initial_visible_columns = ['Li', 'Be']
filtered_table_cols = []
for col_name in df.columns:
is_visible_initially = col_name in initial_visible_columns
filtered_table_cols.<a style="color:#f60; text-decoration:underline;" title="app" href="https://www.php.cn/zt/16186.html" target="_blank">app</a>end(TableColumn(field=col_name, title=col_name, width=100, visible=is_visible_initially))</p><h1>创建DataTable</h1><p>filtered_table = DataTable(source=filtered_table_source, columns=filtered<em>table</em></p>

登录后复制

以上就是Bokeh教程：使用CustomJS动态控制DataTable列的可见性的详细内容，更多请关注php中文网其它相关文章！