使用 CustomJS 向散景图添加交互式图块答案

【问题标题】：Adding an interactive tile to a Bokeh plot using CustomJS使用 CustomJS 向散景图添加交互式图块
【发布时间】：2019-07-23 18:55:23
【问题描述】：

我有一个交互式散景图，它使用 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 回调。

【问题讨论】：

标签： python-3.x plot callback bokeh interactive

【解决方案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)

【讨论】：

非常感谢！！