Question

由于对js的了解不足，我一直在努力应对回调。我了解了select小部件以及其他几个部件，但是滑块不起作用。该图下方的代码将更改，但Y轴将裁剪一半，因此所有条形图都是平坦的。

我发现了很少的示例，但主要与PI和行有关，其中一些来自ColumnDataSource，但仍然无法正确理解该概念。

旨在使用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}

滑块不更新CDS散景

1 个答案: