0

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

我有 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 类型的 ColumnDataSource(id='5489', ...) 是什么意思？它是怎样的字符串？

在此处输入图像描述

4

2 回答 2

2

这里有多个问题。首先是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()
于 2020-01-10T23:19:31.993 回答
0

我不能真正谈论 Bokeh 之上的 Panel 抽象，但值得一提的是，实际的 Bokeh 滑块不能具有诸如ColumnDataSource值之类的复杂事物options。只有简单的类型，如数字、字符串等。碰巧的是：

ColumnDataSource(id='5489', ...)

是 CDS 的“repr”，即，如果您尝试打印 CDS，则生成的字符串。所以我的猜测是，Panel 正在某个地方将 CDS 转换为其字符串表示形式，并将该字符串传递给底层的 Bokeh Selectwidge。这当然不会做你想做的事。

可能有更好的特定于面板的方法来做事，但一种方法是获取底层 BokehSelect小部件，然后调用js_on_change以添加CustomJS更新数据的回调。在文档的JavaScript 回调章节中有很多你可以模拟的例子。

于 2020-01-10T19:41:05.043 回答