Bokeh2.0中的简单日期范围滑块

Question

我正试图在Bokeh2.0中为图表添加日期范围滑块

代码如下所示（数据来自pandas中的数据帧）：

p = figure(plot_width = 800, plot_height = 350, x_axis_type = "datetime")
p.line(df['date'], df['cases'], color='navy', alpha=0.5, legend_label = "cases", line_width = 2)

如何添加滑块来设置和缩小焦点

谢谢大家，干杯

乌尔里希

Answer 1

有几件事需要注意：

• 它将产生CDSView filters are not compatible with glyphs with connected topology suchs as Line and Patch警告。我让你来决定这是否是你关心的事情
• 更改滑块值不会改变数据范围-我认为，出于完全相同的原因，仅仅因为使用circle而不是line效果很好

import pandas as pd
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, BooleanFilter, CDSView, DateRangeSlider, CustomJS
from bokeh.plotting import figure

df = pd.DataFrame(dict(date=['2020-01-01', '2020-01-02', '2020-01-03'], cases=[1, 2, 3]))
df['date'] = pd.to_datetime(df['date'])

p = figure(plot_width=800, plot_height=350, x_axis_type="datetime")

init_value = (df['date'].min(), df['date'].max())
slider = DateRangeSlider(start=init_value[0], end=init_value[1], value=init_value)

ds = ColumnDataSource(df)
date_filter = BooleanFilter(booleans=[True] * df.shape[0])

slider.js_on_change('value', CustomJS(args=dict(f=date_filter, ds=ds),
                                      code="""\
                                          const [start, end] = cb_obj.value;
                                          f.booleans = Array.from(ds.data['date']).map(d => (d >= start && d <= end));
                                          // Needed because of https://github.com/bokeh/bokeh/issues/7273
                                          ds.change.emit();
                                      """))

p.circle('date', 'cases', source=ds, view=CDSView(source=ds, filters=[date_filter]),
         color='navy', alpha=0.5, legend_label="cases", line_width=2)

show(column(p, slider))