Question

我试图在Bokeh 2.0中将日期的RangeSlider添加到图形中。

代码看起来像这样（数据来自熊猫的数据框）：

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))

散景2.0中的简单日期范围滑块

1 个答案: