使用rangeslider創建時間序列圖

我試圖創建滑塊，當您拖動滑塊時，顯示的圖形部分只是滑塊上的內容。例如，如果你看下面的圖表，如果滑塊設置爲1990，那麼你只能看到從1990年到2016年的線條。我發現了一個plotly的實例，但我想看看它是否可以用Bokeh完成。使用rangeslider創建時間序列圖

這是我到目前爲止的代碼：

p = figure(width = 900, height = 450) 
p.xaxis.axis_label = 'Year' 
p.yaxis.axis_label = 'Aggregated Number of Degrees in Education' 

source = ColumnDataSource(df) 
fill_source = ColumnDataSource(data=dict(x=[],y=[])) 

# Create objects for each line that will be plotted 
stem = p.line('year', 'stem', line_color='#8dd3c7', line_width=3, source=source) 
stem = p.circle('year', 'stem', line_color='#8dd3c7', line_width=3, source=source) 
sped = p.line('year', 'sped', line_color='#fdb462', line_width=3, source=source) 
elem = p.line('year', 'elem', line_color='#bebada', line_width=3, source=source) 
elem = p.square('year', 'elem', line_color='#bebada', line_width=3, source=source) 
other = p.line('year', 'other', line_color='#fb8072', line_width=4, source=source) 
aggtotal = p.line('year', 'aggtotal', line_dash=[4,4,], line_color='#80b1d3', line_width=3, source=source) 

yaxis = p.select(dict(type=Axis, layout="left"))[0] 
yaxis.formatter.use_scientific = False  
legend = Legend(items=[("STEM", [stem]) 
         ,("SPED" , [sped]) 
         ,("Elementary", [elem]) 
         ,("Other", [other]) 
         ,("Total Education Graduates", [aggtotal])], location=(0, 0)) 
p.add_tools(HoverTool(tooltips=[("Date", "@year")])) 
p.add_layout(legend, 'right')  

callback_test = CustomJS(args=dict(source=source,fill_source=fill_source), code=""" 
var data = source.data; 
var fill_data = fill_source.data; 
var s_val = cb_obj.value; 
fill_data['x']=[]; 
fill_data['y']=[]; 
for (i = 0; i < s_val; i++) { 
    fill_data['y'][i].push(data['y'][i]); 
    fill_data['x'][i].push(data['x'][i]);   
    } 
fill_source.trigger('change'); 
""") 

sped_slider = Slider(start=1984, end= 2016, value=1, step=1,title="Year",callback=callback_test) 
callback_test.args["sped"] = sped_slider 
layout = row(p,widgetbox(sped_slider))

這使得滑塊，但它沒有做任何事情，我不知道在哪裏可以從這裏走。

來源

2017-09-27 otteheng

您的回調代碼存在一些問題。例如：

你循環i從0到s_val（其可以是1990年），這是不與您的陣列的長度相一致。
您字形引用列'stem'，等等......但fill_source有列'x'和'y'
您字形參考source作爲源，但後來改變和fill_source觸發事件。

所有這些都可能是固定的，但有一個更簡單的方法，調整回調的範圍。例如。取代您的回撥：

x_range = p.x_range 
callback_test = CustomJS(args=dict(x_range=x_range), code=""" 
    var start = cb_obj.value; 
    x_range.start = start; 
    x_range.change.emit(); 
""")

請注意對事件觸發器的更改。你的版本可以工作，但我認爲它會被棄用。

另外：

此行callback_test.args["sped"] = sped_slider是沒有必要的
您可以添加在figure(...)toolbar_location='above'爲避免與傳說
你仍然會有滑塊之間的佈局衝突問題和可以以不同方式修復的圖例（滑塊下方或將滑塊和圖例插入到column之後再添加到繪圖右側等）。

來源

2017-09-28 14:39:05 Alex

使用rangeslider創建時間序列圖

回答

相關問題