Question

我正在创建一个小型仪表板，在其中我希望为用户提供一个选项，以便从Select框中选择要在垂直轴上绘制的内容。本质上，给定ColumnDataSource并在Select框中更改了值，只需更改给定绘图轴引用的列并更新绘图即可。给定that many other glyph properties can be js_linked to widgets，我认为这应该可行。到目前为止，我所看到的唯一实现是在使用Python回调的Bokeh Server中实现的，但是我试图避免使用Bokeh Server。下面说明了这个想法：

from bokeh.models import ColumnDataSource, Select, CustomJS
from bokeh.plotting import figure
from bokeh.layouts import column
from bokeh.io import output_notebook, output_file, show
output_file('foo.html')

source = ColumnDataSource(
    {
    'x': [0, 1, 2, 3],
    'y': [0, 1, 4, 9],
    'z': [0, 2, 3, 1],
    }
)

fig = figure()
line = fig.line(x='x', y='y', source=source)
dropdown = Select(value='y', options=['y','z'])
dropdown.js_link('value', line.glyph, 'y')
layout = column(dropdown, fig)
show(layout)

我还尝试了以下方法，我认为它们在功能上是相同的，但我想更明确：

from bokeh.models import ColumnDataSource, Select, CustomJS
from bokeh.plotting import figure
from bokeh.layouts import column
from bokeh.io import output_file, show
output_file('foo.html')

source = ColumnDataSource(
    {
    'x': [0, 1, 2, 3],
    'y': [0, 1, 4, 9],
    'z': [0, 2, 3, 1],
    }
)

fig = figure()
line = fig.line(x='x', y='y', source=source)
dropdown = Select(value='y', options=['y','z'])
dropdown.js_on_change(
    'value',
    CustomJS(
        args={
            'glyph': line.glyph,
            'source': source,
        }, 
        code="""
            var new_vert = cb_obj.value;
            glyph.y = new_vert; 
        """))
layout = column(dropdown, fig)
show(layout)

在两种情况下，HTML都将在浏览器中正确显示，但是一旦Select值更改，线条图就会消失，而不是绘制所选的CDS系列。我尝试在浏览器中检查，但未返回JS错误。我是否缺少某些东西，或者如果没有Bokeh Server，这是不可能的吗？

编辑：

我还应该补充一点，我试图避免创建第二个CDS并在CustomJS中复制数据，因为我有多个子图共享一个CDS，并且宁愿不要为每个情节创建一个新的情节，以使其行为保持联系。

Answer 1

y的值实际上是一个对象，它指定该值是否应为单个固定值，即CDS中的一系列值。 python API在很大程度上隐藏了所有这些。长话短说，您将需要使用第二个版本，并将分配更改为

glyph.y = {field: new_vert};

Answer 2

经过一番挖掘，我发现此问题的最佳解决方案是为用户可能需要的每组数据创建一个CDSView并将其添加为自己的字形。完成后，您可以使用CustomJS回调通过任意条件切换每个字形的可见性。

在静态页面中更新图ColumnDataSource列引用

2 个答案: