数据集 Python 散景的时间轴滑块答案

【问题标题】：Timeline Slider for Dataset Python Bokeh数据集 Python 散景的时间轴滑块
【发布时间】：2021-02-02 16:39:24
【问题描述】：

我需要你的帮助。我尝试在地图上绘制路线。数据集由 lon 和 lat 组成。我只想将部分路线包含在 RangeSlider 之类的交互式解决方案中。例如只有第 2 和第 4 个索引。不幸的是，我不知道如何正确设置回调函数。如何将回调链接到我的滑块和绘图？

这是我的代码：

from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, GMapOptions, CustomJS
from bokeh.plotting import gmap, ColumnDataSource, figure
from bokeh.layouts import column, row
from bokeh.models.widgets import RangeSlider 
import numpy as np


lon = [48.7886, 48.7887, 48.7888, 48.7889, 48.789]
lat = [8.92, 8.921, 8.922, 8.923, 8.924]

source = ColumnDataSource(data=dict(x=lon, y=lat))

map_options = GMapOptions(lat=48.7886, lng=8.92, map_type="satellite", zoom=13)

p = gmap("MY_API_KEY", map_options, title="Trajectory Map")

p.line('y', 'x', source=source, line_width=2)

range_slider = RangeSlider(title="Data Range Slider: ", start=0, end=3, value=(0, 3), step=1) 


callback = CustomJS(args=dict(source=source, sample=range_slider), code="""
    WHAT DO I NEED IN HERE? HOW CAN I CHANGE THE OUTPUT WITHOUT CHANGING THE SOURCE?
"""
    )

range_slider.js_on_change('value', callback)


layout = row(
    p, range_slider)

output_file("diag_plot_bike_data.html")

show(layout)

【问题讨论】：

标签： python bokeh gmap.net bokehjs pandas-bokeh

【解决方案1】：

我找到了一个解决所有疑惑的方法：

from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, GMapOptions, CustomJS
from bokeh.plotting import gmap, ColumnDataSource, figure
from bokeh.layouts import column, row
from bokeh.models.widgets import RangeSlider 
import numpy as np

lon = [48.7886, 48.7887, 48.7888, 48.7889, 48.789]
lat = [8.92, 8.921, 8.922, 8.923, 8.924]

source = ColumnDataSource(data = {'x': lon, 'y': lat})

map_options = GMapOptions(lat=48.7886, lng=8.92, map_type="satellite", zoom=13)

p = gmap("MY_API_KEY", map_options, title="Trajectory Map")

p.line('y', 'x', source=source, line_width=2)

range_slider = RangeSlider(title="Data Range Slider: ", start=0, end=len(lon), value=(0, len(lon)), step=1) 


callback = CustomJS(args=dict(source=source, slider=range_slider, long=lon, lati=lat), code="""
    var data = source.data;
    const start = slider.value[0];
    const end = slider.value[1];
    
    data['x'] = long.slice(start, end)
    data['y'] = lati.slice(start, end)

    source.change.emit();
    """)

range_slider.js_on_change('value', callback)


layout = row(
    p, range_slider)

output_file("diag_plot_bike_data.html")

show(layout)

【讨论】：