Question

我正在尝试使用滑块更新我的散景图。我发现使用pandas dataframe很难实现它（到目前为止没有找到任何例子）。另一种方法是使用＆＃34; columndatasource＆＃34; （在论坛上找到一些例子）但仍然无法实现这一功能。所以我有两列，X轴是日期，Y轴是Volume。我想根据滑块输入更改Y值。我能看到情节，但滑块功能不起作用

任何帮助都会非常明显。

source = ColumnDataSource(data=dict(x=df2['Date'],y=df2['Vol']))
S1 = figure(plot_width=400,plot_height=400,tools=TOOLS1,title="Volume Per Day",x_axis_type="datetime")
S1.line('x','y',source=source)

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

slider = Slider(start=0, end= max_Vol, value=1, step=100,title="Vol Per Day",callback=callback_test)

Answer 1

您正尝试更新使用滑块绘制的数据范围。

当你这样做时：

# file b.py
from a import A

class B(A):
    pass

print(B(10).a_str()) # prints '10'

如果y是一些长度为＆gt; s_val的数组：

，那么python等价物就是

y = data['y']
for (i = 0; i < s_val; i++) {
    y[i] = y[i]            
    }

这只是将元素从0替换为s_val-1，并且不会更改列表的其余部分。

你可以做两件事：

直接更新显示的轴范围
使用您将根据滑块值

for i in range(s_val):
    y[i] = y[i]

Answer 2

这是我为使其与 Bokeh最新版本

一起使用而进行的更改

JavaScript部分中的某些语法错误已得到纠正，更改trigger的方法现在为change.emit，并且在 Slider之后设置了独立文档的回调 的定义要归功于js_on_change

我添加了所有import命令以给出完整的示例我还更改了可视化效果，以仅显示滑块设定的飞行次数以下的数据（为了将滑块移向较低值时有更多理解）

下面是结果代码：

from bokeh.layouts import column, widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Slider
from bokeh.plotting import Figure
import pandas as pd
from datetime import datetime, date, timedelta
from bokeh.plotting import show
from random import randint

today = date.today()
random_data = [[today + timedelta(days = i), randint(0, 10000)] for i in range(10)]
df2 = pd.DataFrame(random_data, columns = ['Date', 'Vol'])

source = ColumnDataSource(data = dict(x = df2['Date'], y = df2['Vol']))
fill_source = ColumnDataSource(data = dict(x = df2['Date'], y = df2['Vol'])) # set the graph to show all data at loading
TOOLS1 = []
S1 = Figure(plot_width = 400, plot_height = 400, tools = TOOLS1, title = "Volume Per Day", x_axis_type = "datetime")
S1.line('x', 'y', source = fill_source)

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 (var i = 0; i <= data.x.length; i++) {   // added "var" declaration of variable "i"
        if (data['y'][i] <= s_val) { // more meaningful visualization: assuming you want to focuss on dates with less number of flights
            fill_data['y'].push(data['y'][i]); // [i] index on left side of assignment removed
        }
        else {
            fill_data['y'].push(0);
        }
        fill_data['x'].push(data['x'][i]);
    }
    fill_source.change.emit() ; // "trigger" method replaced by "change.emit"
""")

max_Vol = df2['Vol'].max()
slider = Slider(start = 0, end = max_Vol, value = max_Vol, step = 100, title = "Vol Per Day") # Remove attribute "callback = callback_test"
slider.js_on_change('value', callback_test) # new way of defining event listener

controls = widgetbox(slider)
layout = column(controls, S1)
show(layout)

如果我可以将结果（HTML）可视化直接嵌入此答案中，那将是很好的，如果可能的话，让我现在;）

Answer 3

这里有一个工作实例希望你能成功：）

from os.path import dirname, join
import pandas as pd
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import DateRangeSlider,DatePicker,DateFormatter, DataTable, TableColumn, NumberFormatter
from bokeh.io import curdoc
from datetime import datetime,date
import datetime
df = pd.read_csv(join(dirname(__file__), 'test.csv'))
df['dat'] = pd.to_datetime(df['date'])
source = ColumnDataSource(data=dict())

def update():
current = df[(df['dat'] >=  pd.to_datetime(slider.value[0])) & (df['dat'] <=  pd.to_datetime(slider.value[1]))]
  source.data = {
    'opens'             : current.open,
    'dates'           : current.date,
  }

slider = DateRangeSlider(title="Date Range: ", start=date(2010, 1, 1), end=date.today(), value=(date(2017, 9, 7),date.today()), step=1)
slider.on_change('value', lambda attr, old, new: update())




columns = [
   TableColumn(field="dates", title="Date" ,formatter=DateFormatter()),
    TableColumn(field="opens", title="open"),


data_table = DataTable(source=source, columns=columns, width=800)

controls = widgetbox(slider)
table = widgetbox(data_table)

curdoc().add_root(row(controls, table))

update()

这是test.csv文件中的数据

date,open
951868800000,102
951955200000,100.5
952041600000,107.25
952300800000,109.94
952387200000,106
952473600000,103
952560000000,106.5
952646400000,107.62
952905600000,104
952992000000,107.75
953078400000,107.5
953164800000,109
953251200000,108.25
953510400000,110
953596800000,112.81
953683200000,114.5
953769600000,115.87
953856000000,115.37
954115200000,125
954201600000,125.75
954288000000,122.31
954374400000,118.87
954460800000,122.62
954720000000,120
954806400000,121.5
954892800000,120.5
954979200000,123.5
955065600000,123.5
955324800000,124.75
955411200000,121.62
955497600000,119.62
955584000000,112.5
955670400000,109.81
955929600000,103.87
956016000000,112.25

使用散景服务运行代码filename.py

使用滑块更新Bolot Plot

3 个答案: