使用CustomJS将交互式图块添加到散景图

Question

我有一个交互式散景图，使用CheckBoxGroup绘制不同的组合。我希望每次更改组合时都能修改标题，而不必更改代码中的标题并再次生成绘图。

我对CustomJS非常熟悉，但我尝试了以下（...只有标题摘录）：

p = figure(title = 'Default title that appears',
      toolbar_location = 'right')
.
.
update_title = CustomJS(args =dict(source=source, text = text),
                    code ="""
                const data = source.data;
                var text = text.value;

                text = text.value;

                source.change.emit();
""")
text_group = TextInput(title = 'Title', value = "Default value", callback = update_title)
show(column(p,checkbox_group, text_group))

我得到的结果显示标题框但是当我更改标题时没有任何反应。

I essentially want to do this:

但是使用CustomJS而不是Python回调。

Answer 1

您只需将标题传递给回调即可。我发现情节标题是一个散景模型，因此所有常规操作都适用。你的回调可能看起来像这样：

update_title = CustomJS(args=dict(title=plot.title), code="""
    title.text = cb_obj.value
""")

完整的例子就是

import numpy as np
from bokeh.layouts import row, column
from bokeh.models import CustomJS, TextInput
from bokeh.plotting import figure, output_file, show, ColumnDataSource
x = np.linspace(0, 10, 500)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))
plot = figure(y_range=(-10, 10), plot_width=400, plot_height=400, title='my sine wave')
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
update_title = CustomJS(args=dict(title=plot.title), code="""
    title.text = cb_obj.value
""")
text = TextInput(title='Enter title', value='my sine wave', callback=update_title)
layout = row(
    plot,
    text
)
output_file('title_change.html', title='change title')
show(layout)