javascript - 代码无法识别 ColumnDataSource 的本质

Question

我想根据用户从下拉菜单中选择的内容更改简单线图的数据源。

我有 2 个数据框，分别是我自己和男朋友的体重和年龄。

my_weight = [60,65,70] 
my_age = [21,22,25]

d_weight = [65,70,80] 
d_age = [21,22,25]

me = pd.DataFrame(list(zip(my_weight, my_age)), 
               columns =['weight', 'age'], index=None) 

dillon = pd.DataFrame(list(zip(d_weight, d_age)), 
               columns =['weight', 'age'], index=None)

我将这两个数据框转换为 ColumnDataSource 对象，创建我的绘图和线条，添加我的下拉列表和 jslink。还有一个演示 slider ，展示如何更改线条的 line_width。

from bokeh.models import ColumnDataSource
from bokeh.core.properties import Any, Bool, ColumnData

pn.extension()

source = ColumnDataSource(me, name="Me")
source2 = ColumnDataSource(dillon, name="Dillon")
# print("Me: ", source.data, "Dillon: ", source2.data)

plot = figure(width=300, height=300)
myline = plot.line(x='weight', y='age', source=source, color="pink")

width_slider = pn.widgets.FloatSlider(name='Line Width', start=0.1, end=10)
width_slider.jslink(myline.glyph, value='line_width')

dropdown2 = pn.widgets.Select(name='Data', options=[source, source2])
dropdown2.jslink(myline, value='data_source')

pn.Column(dropdown2, width_slider, plot)

当我运行此代码时，出现错误

ValueError:需要一个 DataSource 类型的实例，却得到了 str 类型的 ColumnDataSource(id='5489', ...)

代码的 dropdown2 部分发生错误。

是什么阻止代码将 source 和 source2 识别为 ColumnDataSource() 对象？get ColumnDataSource(id='5489', ...) 类型为 str 是什么意思？怎么是字符串呢？

Answer 1

这里存在多个问题。首先，Select 小部件实际上并未使复杂对象在 Javascript 中可用，因此尝试在 JS 回调中访问这些模型的回调将不起作用。因此，唯一的解决方案是编写一个实际的 JS 回调并提供实际模型作为 args。这里的第二个复杂之处是两个数据源包含不同的列，特别是“Me”ColumnDataSource 包含年龄列，“Dillon”数据源包含高度列。这意味着您还需要更新字形以查看这些不同的来源。实际上，这看起来像这样:

import panel as pn

from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, DataRange1d
from bokeh.core.properties import Any, Bool, ColumnData

source = ColumnDataSource(me, name="Me")
source2 = ColumnDataSource(dillon, name="Dillon")

plot = figure(width=300, height=300)
myline = plot.line(x='weight', y='age', source=source, color="pink")

width_slider = pn.widgets.FloatSlider(name='Line Width', start=1, end=10)
width_slider.jslink(myline.glyph, value='line_width')
dropdown2 = pn.widgets.Select(name='Data', options={'Me': source, 'Dillon': source2})

code = """
if (cb_obj.value == 'Me') {
  myline.data_source = source
  myline.glyph.y = {'field': 'age'}

} else {
  myline.data_source = source2
  myline.glyph.y = {'field': 'height'}
}
"""
dropdown2.jscallback(args={'myline': myline, 'source': source, 'source2': source2}, value=code)

话虽这么说，我建议在面板中实现此功能的方式是:

dropdown2 = pn.widgets.Select(name='Data', options={'Me': me, 'Dillon': dillon}, value=me)
width_slider = pn.widgets.FloatSlider(name='Line Width', start=1, end=10)

@pn.depends(dropdown2)
def plot(data):
    source = ColumnDataSource(data)
    plot = figure(width=300, height=300)
    column = 'age' if 'age' in source.data else 'height'
    myline = plot.line(x='weight', y=column, source=source, color="pink")
    width_slider.jslink(myline.glyph, value='line_width')
    return plot

pn.Column(dropdown2, width_slider, plot).embed()

最后，如果你愿意付出hvPlot继续，这可以进一步简化为:

import hvplot.pandas

dropdown2 = pn.widgets.Select(name='Data', options={'Me': me, 'Dillon': dillon}, value=me)
width_slider = pn.widgets.FloatSlider(name='Line Width', start=1, end=10)

@pn.depends(dropdown2)
def plot(data):
    p = data.hvplot('weight', color='pink')
    width_slider.jslink(p, value='glyph.line_width')
    return p

pn.Column(dropdown2, width_slider, plot).embed()