滑块未更新CDS Bokeh

Question

我一直在努力解决js中的回调问题，因为我对它没有足够的了解。我和其他几个人一起理解了select小部件，但滑块就是不起作用。绘图下面的代码将发生变化，但Yaxis将被裁剪成两半，因此所有条形图都是扁平的。

我找到的例子很少，但大部分都与PI和lines有关，有些来自ColumnDataSource，但我仍然不能正确地掌握概念。

dataset

目的使用CDS变量根据滑块值更新绘图，即从2009到2018年。

import pandas as pd
import numpy as np

from bokeh.layouts import column, row, gridplot
from bokeh.models import ColumnDataSource, CustomJSTransform, Select, HoverTool, Slider
from bokeh.plotting import figure
from bokeh.io import (output_notebook, show, curdoc, output_file)
from bokeh.palettes import Pastel2, viridis
import matplotlib.pyplot as plt
%matplotlib inline
output_notebook()

df1 = pd.read_csv('ageGroupYear.csv', delimiter=',', index_col='Age Groups')
df1['color'] = viridis(len(df1.index))

source = ColumnDataSource(data=dict(x=df1.index, _2009=df1['2009'], _2010=df1['2010'], _2011=df1['2011'],
                                    _2012=df1['2012'], _2013=df1['2013'], _2014=df1['2014'], _2015=df1['2015'],
                                    _2016=df1['2016'], _2017=df1['2017'], _2018=df1['2018'], c=df1['color']))

p = figure(x_range=list(df1.index.values), plot_height=350, plot_width=550,title='Irish Population Breakdown by Age Group',
            tools='pan, wheel_zoom, box_zoom, reset')
p.vbar(x='x', top='_2016', width=0.5, source=source, color='c')

#plot style
p.xaxis.major_label_orientation = 45
p.grid.grid_line_color=None
p.outline_line_color=None
p.axis.major_label_text_font_style = 'bold'
p.toolbar.autohide = True

hoverp = HoverTool()
hoverp.tooltips=[('Group Population', '@_2009')]
p.add_tools(hoverp)


tick_labels_p = {'100':'100K','200':'200K','300':'300K','400':'400K'}
p.yaxis.major_label_overrides = tick_labels_p


#ts = ['y09','y10', 'y11', 'y12','y13','y14','y15','y16','y17','y18']
#slider = Slider(start=2009, end=2018, value=2016, step=1, title="Year")

select = Select(title="Year:", align='start', value='_2016', width=80, height=30, options=['_2009','_2010', '_2011', '_2012','_2013','_2014','_2015','_2016','_2017','_2018'])
select.callback = callback

callback = CustomJS(args={'source':source},code="""
        console.log(' changed selected option', cb_obj.value);

        var data = source.data;

        // allocate column
        data['_2016'] = data[cb_obj.value];

        // register the change 
        source.change.emit();
""")

callback3 = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var f = cb_obj.value
    x = data['x']
    y = data['_2016']


    for (i = 0; i < x.length; i++) {
        y[i] = (y[i], f)
    }

    source.change.emit();

""")

slider3 = Slider(start=2009, end=2018, value=2016, step=1, title="Year", callback=callback3)
slider3.js_on_change('value', callback3)

layout = column(slider3, p)
show(layout)

#layout = row(select,p)
#show(layout)

Answer 1

看看这个答案，从第二段开始。

相关信息-不要更改数据，更改指向数据的指针。

vbar = p.vbar(...)

# Somewhere in CustomJS code:
vbar.glyph.top = {field: new_year}