时间戳

首页 > 解决方案 > 更新静态页面中的 Plot ColumnDataSource 列引用

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

问题描述

我正在创建一个小型仪表板，我想在其中为用户提供选项，以从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，我不想为每个图创建一个新的，以便它们的行为保持链接.

标签： javascriptpythonbokeh

解决方案

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

glyph.y = {field: new_vert};

推荐阅读