滑块散景图回调 customJS

时间:2021-01-08 16:02:44

标签: python slider data-visualization bokeh interactive

我正在尝试使用 2 个滑块创建交互式散景图。

我的代码如下

import numpy as np
import pandas as pd

from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.plotting import figure, output_file, show


def my_fun(A0=10, k=2):
    
    x = np.arange(0,5,0.5)
    A = A0*np.exp(-k*x)
    B = A0 - A0*np.exp(-k*x)
    
    return A, B, x

A, B, x = my_fun(A0=10, k=2)

output = np.stack((x,A,B),axis=1)

output = pd.DataFrame(data=output)
output.columns = ['x','A','B']
output.head(10)

source = output

plot = figure(plot_width=400, plot_height=400)

plot.scatter('x', 'A', source=source, color='blue', size = 7.5)
plot.line('x', 'A', source=source, line_color='blue', line_width=2)

plot.scatter('x', 'B', source=source, color='red', size = 7.5)
plot.line('x', 'B', source=source, line_color='red', line_width=2)

plot.xaxis.axis_label = 'Time'
plot.yaxis.axis_label = 'Stock Price'

slider_A = Slider(start=5, end=10, value=10, step=.1, title="A0")
slider_k = Slider(start=0.5, end=4, value=2, step=.1, title="k")

callback = CustomJS(args=dict(source=source), code="""
        var data = source.data;
        var f = cb_obj.value
        var x = data['x']
        var y = data['y']
        for (var i = 0; i < x.length; i++) {
            y[i] = Math.pow(x[i], f)
        }
        source.change.emit();
    """)


slider.js_on_change('value', callback)

layout = column(
        column(slider_A, slider_k),
        plot,
)

show(layout)

代码的输出是预期的 html 图(下面的屏幕截图)。

enter image description here

当滑块移动时,输出不会改变(当然不会),因为 回调 没有正确定义(我知道!)。我不知道如何修改 CustomJS 部分,因为它的 Javascript(?)。

如何在 my_funcallback 中调用 CustomJS 以更新新输入值的输出,即 A0k

谢谢

0 个答案:

没有答案
相关问题