使用 RangeSlider 更改轴范围

Question

我用散景创建了一个图，现在正尝试向其中添加一些小部件。目前我想用 RangeSlider 更改 x 轴，但我认为我在回调方面遇到了一些麻烦。随函附上代码：

import pandas as pd
import numpy as np
import bokeh.plotting as bp
from bokeh.models import CustomJS
from bokeh.models.widgets import RangeSlider
from bokeh.layouts import row, widgetbox
from bokeh.plotting import figure, show, output_file


df = pd.DataFrame(np.random.randint(0,30,size=(100, 3)), columns=list('ABC'))
df.index.name ='Numbers'
dt = bp.ColumnDataSource(df)

output_file("Plot.html")

p = figure(title="Example", 
       x_axis_label = "Number", y_axis_label = "Temperature in C",
       x_range=(0,100))

p.line(source=dt, x='Numbers', y='A', color='blue', legend='Line A')
p.line(source=dt, x='Numbers', y='B', color='red', legend='Line B')
p.line(source=dt, x='Numbers', y='C', color='green', legend='Line C')
p.legend.click_policy="hide"

callback = CustomJS(args=dict(p=p), code="""
                      var a = cb_obj.value;
                      p.x_range = a;
                      p.change.emit();
                      """)

range_slider = RangeSlider(start=0, end=100,value=(2,75), step=1, title="Test")
range_slider.js_on_change('value', callback)


layout = row(p,widgetbox(range_slider))
show(layout)

提前致谢！

Answer 1

您必须在范围内分别设置 start 和 end:

callback = CustomJS(args=dict(p=p), code="""
    var a = cb_obj.value;
    p.x_range.start = a[0];
    p.x_range.end = a[1];
""")

此外，对 emit 的调用是不必要的。

使用 RangeSlider 更改轴范围

Changing axis range with RangeSlider

python

bokeh

rangeslider