SliderでCustomJSコールバックを使用して異なる列をプロットする

Question

私は、複数の列の単純なColumnDataSourceを持っています。各列はシミュレーションの異なる日を表し、各行はステータスがa、b、c、スライダーで日（列）をスクラブするのが好きです。

1、2、Bokeh docsをご覧になりましたが、正常に動作することができませんでした。私は次のコードを持っています（最小限）：

from bokeh.plotting import figure 
from bokeh.layouts import column, widgetbox 
from bokeh.models import CustomJS, Slider, ColumnDataSource, ranges 
from bokeh.io import output_file, show 

output_file("barplot.html") 
sim_time=4 

data = {'x': ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], 
     '0': [2860.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], 
     '1': [2860.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], 
     '2': [0.0, 2860.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], 
     '3': [0.0, 2860.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]} 

source = ColumnDataSource(data) 

barplot = figure(plot_width=800, plot_height=600, tools='pan', x_axis_label='Status', x_range=source.data['x'], y_range=ranges.Range1d(start=0, end=3000)) 
barplot.vbar(source=source, x='x', top='0', width=0.6) 

callback = CustomJS(args={'source':source}, code=""" 
    console.log(' changed selected time', cb_obj.value); 
    var data = source.data; 
    data['0'] = data[cb_obj.value]; 
    source.change.emit() 
""") 

time_slider = Slider(start=0, end=sim_time-1, value=1, step=1, callback=callback) 
callback.args["time"] = time_slider 

show(column(barplot, time_slider)) 

つまり、私はスライダーを使って列をスクラブできません。

私は間違っていますか？

乾杯

Answer 1

はこれを試してみてください：

data = {'x': ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], 
     'y': [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], 
     '0': [0.0, 0.0, 0.0, 0.0, 500.0, 0.0, 0.0, 0.0], 
     '1': [0.0, 1000.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], 
     '2': [0.0, 0.0, 1000.0, 0.0, 0.0, 0.0, 0.0, 0.0], 
     '3': [0.0, 0.0, 0.0, 1000.0, 0.0, 0.0, 0.0, 0.0]} 

source = ColumnDataSource(data) 

barplot = figure(plot_width=800, plot_height=600, tools='pan', 
       x_axis_label='Status', x_range=source.data['x'], 
       y_range=ranges.Range1d(start=0, end=3000)) 
barplot.vbar(source=source, x='x', top='y', width=0.6) 

callback = CustomJS(args=dict(source=source), code=""" 
    console.log(' changed selected time', cb_obj.value); 
    var data = source.data; 
    data['y'] = data[cb_obj.value]; 
    source.change.emit() 
""") 

time_slider = Slider(start=0, end=sim_time-1, value=0, step=1, callback=callback) 
callback.args["time"] = time_slider  
show(column(barplot, time_slider)) 

あなたのコードには2つの問題があります。 01と23のバーは同じです。 2と3の間で変更はありません。また、データの格納には0列を使用します。しかし、あなたはJSコードの0のデータを上書きします。したがって、データは失われます。したがって、スライダーで0に戻っても効果はありません。このため、新しい（空の）列yをデータに追加しました。これは、現在選択されているデータを保持するプロットに使用される単なるプレースホルダです。