javascript - 代码无法识别ColumnDataSource是什么

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

我有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。还有一个演示滑块，显示如何更改行的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: expected an instance of type DataSource, got ColumnDataSource(id='5489', ...) of type str

错误发生在代码的dropdown2部分中。

是什么导致代码无法将source和source2识别为ColumnDataSource（）对象？
str类型的gotColumnDataSource（id ='5489'，...）是什么意思？字符串怎么样？

javascript - 代码无法识别ColumnDataSource是什么-LMLPHP

最佳答案

这里有多个问题。首先是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)

话虽如此，我建议在Panel中实施此方法的方法是：

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()

关于javascript - 代码无法识别ColumnDataSource是什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59680986/

ColumnDatasource

javascript - 代码无法识别ColumnDataSource是什么