我试着用Bokeh构建一个动态图表,我对JavaScript部分很感兴趣,并使用自定义JS回调。我明确表示,我绝对不熟悉JavaScript
这是我的数据框:
num_tra num_ts Item annee valeur TRA_label TS_label TRA TS Sensi Cumul
1 1 PVFP 10 62 0 bps 0 bps 0 0 Sensi 62
1 1 PVFP 20 28 0 bps 0 bps 0 0 Sensi 90
1 1 PVFP 30 87 0 bps 0 bps 0 0 Sensi 177
1 2 PVFP 10 25 0 bps - 15 bps 0 -15 Sensi 25
1 2 PVFP 20 95 0 bps - 15 bps 0 -15 Sensi 120
1 2 PVFP 30 95 0 bps - 15 bps 0 -15 Sensi 215
2 1 PVFP 10 49 - 10 bps 0 bps -10 0 Sensi 49
2 1 PVFP 20 17 - 10 bps 0 bps -10 0 Sensi 66
2 1 PVFP 30 98 - 10 bps 0 bps -10 0 Sensi 164
2 2 PVFP 10 83 - 10 bps - 15 bps -10 -15 Sensi 83
2 2 PVFP 20 58 - 10 bps - 15 bps -10 -15 Sensi 141
2 2 PVFP 30 52 - 10 bps - 15 bps -10 -15 Sensi 193
1 1 PVFP 10 44 0 bps 0 bps 0 0 Central 44
1 1 PVFP 20 60 0 bps 0 bps 0 0 Central 104
1 1 PVFP 30 97 0 bps 0 bps 0 0 Central 201
1 2 PVFP 10 82 0 bps - 15 bps 0 -15 Central 82
1 2 PVFP 20 88 0 bps - 15 bps 0 -15 Central 170
1 2 PVFP 30 38 0 bps - 15 bps 0 -15 Central 208
2 1 PVFP 10 58 - 10 bps 0 bps -10 0 Central 58
2 1 PVFP 20 30 - 10 bps 0 bps -10 0 Central 88
2 1 PVFP 30 69 - 10 bps 0 bps -10 0 Central 157
2 2 PVFP 10 2 - 10 bps - 15 bps -10 -15 Central 2
2 2 PVFP 20 62 - 10 bps - 15 bps -10 -15 Central 64
2 2 PVFP 30 69 - 10 bps - 15 bps -10 -15 Central 133
我要找的是一个带有两个滑块(slider_TRA和slider_TS)的图表,基于变量num_TRA和num_TS的值。最后,我想根据两个滑块的值更新绘图的源
基于Bokeh文档示例,我尝试构建以下代码,但不知道如何处理JS部分:
import numpy as np
import pandas as pd
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.layouts import column, row
from bokeh.plotting import ColumnDataSource, figure, output_file, show
central=pvfp.loc[pvfp.Sensi=="Central"]
sensi=pvfp.loc[pvfp.Sensi=="Sensi"]
source1 = ColumnDataSource(central)
source2 = ColumnDataSource(sensi)
plot = figure(plot_width=400, plot_height=400)
plot.line('annee', 'valeur', source=source1)
plot.line('annee', 'valeur', source=source2)
slider_TRA = Slider(start=1, end=2, value=1, step=1, title="Sensi TRA")
slider_TS = Slider(start=1, end=2, value=1, step=1, title="Sensi TS")
callback = CustomJS(
args=dict(source1=source1,source2=source2, slider_TRA=slider_TRA,slider_TS=slider_TS),
code="""
const data1 = source1.data;
const data2 = source2.data;
const stra = slider_TRA.value;
const sts = slider_TS.value;
const num_tra1 = data1['num_tra']
const num_ts1 = data1['num_ts']
const num_tra2 = data2['num_tra']
const num_ts2 = data2['num_ts']
for ...some JS to say :
num_tra1=num_tra2=stra
num_ts1=num_ts2=sts
and
source1=source1.loc[(source1.num_tra==num_tra1)&(source1.num_ts==num_ts1)]
source2=source2.loc[(source2.num_tra==num_tra2)&(source2.num_ts==num_ts2)]
source1.change.emit();
source2.change.emit();
"""
)
slider_TRA.js_on_change('value', callback)
slider_TS.js_on_change('value',callback)
layout = row(
plot,
column(slider_TRA, slider_TS),
)
show(layout)
如上所述,我不熟悉JS,我正在寻找能帮助我的人。 如果您有任何想法或建议,将不胜感激
此解决方案适用于Bokeh v2.3.0。 您需要将完整的数据传递给回调函数,并根据滑块值进行过滤。但您不能将过滤后的结果数据分配给原始数据,因为这样会丢失信息。因此,您应该将过滤后的数据分配给相应glyph的
data_source
对象。 此外,两行的起始数据应根据初始滑块位置进行过滤结果:
相关问题 更多 >
编程相关推荐