时间戳

首页 > 解决方案 > 滑块未更新 CDS Bokeh

javascript - 滑块未更新 CDS Bokeh

问题描述

我一直在为 js 中的回调而苦苦挣扎，因为我没有足够的知识。我了解其他几个小部件的选择小部件，但滑块不起作用。绘图下方的代码会发生变化，但 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)

标签： javascriptpython-3.xcallbacksliderbokeh

解决方案

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

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

vbar = p.vbar(...)

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

推荐阅读