更新静态页面中的 Plot ColumnDataSource 列引用

Question

我正在创建一个小型仪表板，我想在其中为用户提供选项，以从Select框中选择将在垂直轴上绘制的内容。本质上，给定框中的 aColumnDataSource和值更改Select，只需更改给定绘图轴引用的列并更新绘图。鉴于许多其他字形属性可以是js_linkedwidgets，我认为这应该是可能的。到目前为止，我见过的唯一实现是在 Bokeh Servers 中使用 Python 回调，但我试图避免使用 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在 a 中创建第二个和复制数据CustomJS，因为我有多个子图共享一个CDS，我不想为每个图创建一个新的，以便它们的行为保持链接.

Answer 1

经过一番挖掘，我发现这个问题的最佳解决方案是为用户可能想要的每个数据分组创建一个 CDSView，并将每个分组添加为自己的字形。完成后，您可以使用 CustomJS 回调按照您想要的任何标准切换每个字形的可见性。

Answer 2

的值y实际上是一个对象，它指定该值是否应该是单个固定值，即来自 CDS 的值序列。python API 在很大程度上隐藏了所有这些。长话短说，您将需要使用第二个版本，并将作业更改为glyph.y = {field: new_vert};