javascript - 如何更新多行字形的 ColumnDataSource 数据？

Question

我正在尝试创建一个绘制多个时间序列的 Bokeh 应用程序，并允许用户使用 CheckboxButtonGroup 小部件选择时间序列的一个子集。我想从 python 更改显示的图形，而不是试图在 javascript 端隐藏/取消隐藏行。我试图通过添加多行并从回调函数更改其数据源中的值来做到这一点。当我更改时间序列的内容或删除时间序列时，这工作正常，但一旦我尝试将时间序列添加到多行，我就会在 javascript 端(chrome控制台打印 Bokeh: Error handling message).

具体来说，我有一个 pandas 数据框，其中有一个 data 列，由存储桶名称和时间戳索引:

data = pandas.DataFrame(...)
buckets = data.index.levels[0]
timestamps = data.index.levels[1]

我有一个多线图和一个控件:

plot = bokeh.plotting.Figure(x_axis_type = "datetime")
multiline = plot.multi_line(xs = [], ys = [])
bucketsControl = bokeh.models.widgets.CheckboxButtonGroup(labels = list(buckets))

我有一个更新数据源并由控件触发的回调函数:

def update(value):
    xs = []
    ys = []
    for bucketIndex in bucketsControl.active:
        bucketName = bucketsControl.labels[bucketIndex]
        bucketData = data.loc[bucketName]
        series = bucketData["data"]
    xs.append(series.index.values)
    ys.append(series.values)
    multiline.data_source.data["xs"] = xs
    multiline.data_source.data["ys"] = ys

bucketsControl.on_click(update)

我不确定是什么导致了这里的问题，但是当我尝试添加另一个时间序列时，我查看了 Bokeh 服务器和网络浏览器之间的网络套接字流量，并且我看到它导致两次 ModelChanged 更新:第一个将另一个列表添加到 xs，第二个将一个列表添加到 ys。我怀疑 BokehJS 客户端无法处理第一次更新，其中 x 系列比 y 系列多一个。

有没有办法让这个多行更新工作？或者，是否有另一种方法可以从 python 更新绘图的结构(例如，向绘图添加一个全新的行，而不是更改现有字形的数据源)？

Answer 1

因为你更新了两次数据源。您只能通过以下方式更新一次:

data = dict(xs=xs, ys=ys)
multiline.data_source.data = data