python - 数据集 Python 散景的时间轴滑块
问题描述
我需要你的帮助。我尝试在地图上绘制路线。数据集由 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)
解决方案
我找到了所有想知道的解决方案:
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)
推荐阅读
- angular - 从父级到子级的角度传递数据是未定义的
- apache-kafka - Kafka 默认代理日志记录
- javascript - 使用 AJAX 将 javascript 变量的值传递给 PHP 变量不起作用
- react-native - 在 Flatlist 内滚动时,TouchableOpacity 突出显示
- android - Gradle 代码在代码下方有红线并且应用程序未安装在虚拟或真实设备上
- python - 如何在 Python 中添加一维列数组(1,35040)中的每四个元素
- powershell - 机器复制 $lastexitcode/$? 不一致的行为取决于目标路径是本地路径还是服务器上
- mongodb - 仅当不在数组中时才计数
- mysql - 使用带蒸汽 3 的 FluentMySQL
- logging - 跟踪/记录自定义 Roslyn 分析器实现的好选择是什么?