如何使用自定义 JS 更改线图源？

Question

我的数据框有几列。我想使用下拉菜单来触发 y 值的变化。

到目前为止我有

import pandas as pd

from bokeh.io import output_file, save
from bokeh.models import ColumnDataSource, Dropdown, CustomJS
from bokeh.layouts import column
from bokeh.plotting import figure


if __name__ == '__main__':
    df = pd.DataFrame(data={"a": [1, 2, 3], "b": [2, 2, 2], "c": [3, 2, 1]})
    source = ColumnDataSource(df)

    fig = figure()
    line = fig.line(x="a", y="b", source=source)

    dropdown = Dropdown(label="Choose y", menu=[("b", "b"), ("c", "c")])
    code = """
    // how to set the line source equal to "this.item"?
    """
    update_line_callback = CustomJS(args={"dropdown": dropdown, "line": line, "source": source}, code=code)
    dropdown.js_on_event("menu_item_click", update_line_callback)

    output_file("out.html")
    save(column(children=[fig, dropdown]))

如何 link 带有行源的下拉项？

Answer 1

一个可行的选择是在您要显示的数据源中创建一个列，并在 Dropdown 由所选名称调用时更改此值。如果您调用 dropdown.js_on_event("menu_item_click", *callback)

，则新名称为 this.item

这是工作代码：

import pandas as pd

from bokeh.io import output_file, save
from bokeh.models import ColumnDataSource, Dropdown, CustomJS
from bokeh.layouts import column
from bokeh.plotting import figure, show, output_notebook
output_notebook()

# create some source
df = pd.DataFrame(data={"a": [1, 2, 3], "b": [2, 2, 2], "c": [3, 2, 1]})
df["show"] = df["b"]
source = ColumnDataSource(df)

# figure
fig = figure()
line = fig.line(x="a", y="show", source=source)
dropdown = Dropdown(label="Choose y", menu=[("b", "b"), ("c", "c")])

# overwrite show values with new selection
code = """
    let s = source.data
    s["show"] = s[this.item]
    source.change.emit();
"""
dropdown.js_on_event("menu_item_click", CustomJS(args={"source": source}, code=code))

# output figure
show(column(children=[fig, dropdown]))

如何使用自定义 JS 更改线图源？

How to use custom JS to change source of line plot?

python

bokeh